[Tailwindcss] npm run dev시 Failed to load PostCSS config 에러

🚫 tailwindcss 설치 후 postcss 에러가 발생할 때

프로젝트 세팅 중 tailwindcss의 Get started with Tailwind CSS를 차근차근 따라했는데도 npm run dev시 Failed to load PostCSS config 에러가 발생했다. postcss.config.js 파일이 문제인 것 같았다.

PS C:\git-repo\twitter-clone> npm run dev

> twitter-clone@0.0.0 dev
> vite


  VITE v4.3.8  ready in 431 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/git-repo/twitter-clone): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: C:/git-repo/twitter-clone): [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 'C:\git-repo\twitter-clone\package.json' contains "type": "module". To treat it as a CommonJS 
script, rename it to use the '.cjs' file extension.
This file is being treated as an ES module because it has a '.js' file extension and 'C:\git-repo\twitter-clone\package.json' contains "type": "module". To treat it as a CommonJS 
script, rename it to use the '.cjs' file extension.
    at file:///C:/git-repo/twitter-clone/postcss.config.js:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importDefault (file:///C:/git-repo/twitter-clone/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:36460:18)
    at async Object.search (file:///C:/git-repo/twitter-clone/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:28897:38)
]

 

✅ postcss.config.js의 확장자 변경하기

로그가 시키는대로 postcss.config.js를 postcss.config.cjs로 rename 하자 해결되었다.

PS C:\git-repo\twitter-clone> npm run dev

> twitter-clone@0.0.0 dev
> vite


  VITE v4.3.8  ready in 366 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
오전 10:51:38 [vite] page reload tailwind.config.js

 

💭 Tailwindcss 설치 참고 주소

https://tailwindcss.com/docs/installation/using-postcss

Install Tailwind CSS using PostCSS - Tailwind CSS