Vite で build するときに、下記のエラーが発生する場合があります。
原因は、下記の通りとなり、解決方法は、すべてのファイル拡張子を「cjs」に変更することで、エラーが発生しなくなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/var/www/html/simple # npm run build vite v4.2.1 building for production... ✓ 33 modules transformed. ✓ built in 742ms [vite:css] Failed to load PostCSS config (searchPath: /var/www/html/simple): [ReferenceError] module is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and '/var/www/html/simple/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension. ReferenceError: module is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and '/var/www/html/simple/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension. at file:///var/www/html/simple/postcss.config.js:1:1 at ModuleJob.run (node:internal/modules/esm/module_job:194:25) file: /var/www/html/simple/src/index.css error during build: |
package.jsonのtypeが"module"となっている場合、package.jsonがあるディレクトリ以下のjsファイルのモジュールシステムをESモジュールに固定されます。
module.exportsやrequire()の機能はCommonJSに定義されていますが、ESモジュールには定義されていないので上記エラーが発生します。
そのため、postcss.config.jsの拡張子をcjsに変換してCommonJSの機能を使用できるようにしています。
参考サイト
Viteで開発環境構築〜Pug・Sass・JS〜
https://yuito-blog.com/vite-develop/
