commonJS moduleが読み込めないエラーと戦う
kagunyan (minami)Vite+Remixで立ち上げているプロジェクトで以下のエラーが発生した。
dayjsで怒られている
[vite] Named export 'Dayjs' not found. The requested module 'dayjs' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'dayjs';
const {Dayjs} = pkg;
言われているようにしても解決しない
import pkg from 'dayjs';
const {Dayjs} = pkg;
以下の記事を参考にvite.config.jsにオプションをつけてみたけど、dayjsでextendしている部分でエラーが起きてしまったので根本解決はしてない
ssr: {
noExternal: ["dayjs", ],
},
ここで怒られる
import dayjs from 'dayjs';
dayjs.extend(utc);
export {dayjs};
一旦extendの処理を全てコメントアウトするとエラーは消えるが、表示の挙動がおかしい。
kagunyan (minami)ホットリロードだとうまく表示される
①をコメントアウト、②をおく
②を表示したまま、①をコメントアウト解除
→正常に①が表示される
export default function Test() {
return <DayjsTest />; // ①本来表示したいdayjsを使ったコンポーネント
return <p>適当</p>; // ②適当に用意したテキスト
}
SSR周りが完全理解できていないのが問題な気がするなあ
kagunyan (minami)cjsじゃなくてesmで読み込めるようにしたらうまくいった...
import dayjs, { Dayjs } from 'dayjs/esm';
なんかこれでうまくいくならそれでいいけど...ちょと納得いってない
kagunyan (minami)utils/dayjsで設定してたpluginとかも全部esm配下にあったので引っ張ってくるようにした
import dayjs, { Dayjs } from 'dayjs/esm';
import ja from 'dayjs/esm/locale/ja';
import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
import isSameOrBefore from 'dayjs/esm/plugin/isSameOrBefore';
import timezone from 'dayjs/esm/plugin/timezone';
import utc from 'dayjs/esm/plugin/utc';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(customParseFormat);
dayjs.extend(isSameOrBefore);
dayjs.locale(ja);
export { Dayjs, dayjs };
dayjs/esmを使わず解決した！！
cjsの依存関係で読み込めないパッケージはcjsInteropを使えばエラーなくいけました👍
参考資料
kagunyan (minami)あとで記事化するぞ〜〜
kagunyan (minami)記事化するに当たって読んでる記事
kagunyan (minami)package.json に "type": "module" を指定することで .js 拡張子のファイルを ESM として実行にすることができようになりました。ただし CJS は拡張子を .cjs にする必要があります。
kagunyan (minami)他の解決方法が見つかりそうだなあ
ただしこの場合、リンクされた依存関係が ESM としてエクスポートされている必要があります。そうでない場合は、optimizeDeps.include と build.commonjsOptions.include に依存関係を追加して、設定することができます。