twailwindcss

[解決] vite & tailwind config中に「Internal server error: Failed to load PostCSS config」「[ReferenceError] module is not defined in ES module scope」

[解決] vite & tailwind config中に「Internal server error: Failed to load PostCSS config」「[ReferenceError] module is not defined in ES module scope」

twailwindcss
twailwindcss

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にする