[解決] vite & tailwind config中に「Internal server error: Failed to load PostCSS config」「[ReferenceError] module is not defined in ES module scope」
viteとtailwindの設定しているとyoutubeの解説でハンズオンしていても
怒られるところがある。
Install Tailwind CSS with Vite (HTML, JavaScript & Vite - Using PostCSS)
postcss.config.js
を作る場面で動画ではjsで作っているが、それをすると
怒られる。
1:26:23 PM [vite] Internal server error: Failed to load PostCSS config (searchPath: /Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: /Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project): [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 '/Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project/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 '/Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project/postcss.config.js:1:1
at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async importDefault (file:///Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project/node_modules/vite/dist/node/chunks/dep-561c5231.js:25909:18)
at async Object.search (file:///Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project/node_modules/vite/dist/node/chunks/dep-561c5231.js:18346:38)
at async resolvePostcssConfig (file:///Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project/node_modules/vite/dist/node/chunks/dep-561c5231.js:42315:22)
at async compileCSS (file:///Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project/node_modules/vite/dist/node/chunks/dep-561c5231.js:42083:27)
at async TransformContext.transform (file:///Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project/node_modules/vite/dist/node/chunks/dep-561c5231.js:41706:55)
at async Object.transform (file:///Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project/node_modules/vite/dist/node/chunks/dep-561c5231.js:35252:30)
Plugin: vite:css
File: /Users/kenjimorita/git/handsonFrontend/tailwindcss/vite-project/style.css
モジュールがESモジュールスコープで定義されていない時に出るエラー。
package.jsonでtype:moduleとして扱っているため
configをcommonjsとして扱うには、名前を「.cjs」ファイル拡張子を使用するように変更する。
なので大人しく、
rename it to use the '.cjs' file extension.
.cjs
にする