如何修復錯誤 ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css 找不到模組
我的一些學員在進行 Next.js 項目的 npm run dev 時遇到了一個我無法重現的問題。
他們遇到了如下錯誤：
➜ rest-api git:(main) npm run dev
> [[email protected]](/cdn-cgi/l/email-protection) dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from /Users/flaviocopes/dev/bootcamp/rest-api/.env
wait - compiling...
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css
Error: Cannot find module 'tailwindcss'
最後一行中出現了 tailwindcss，同時還有 autoprefixer 的問題。
還有可能出現這個錯誤：Error: Your custom PostCSS configuration must export a plugins key.
這個錯誤信息其實並不是很有用！
經過大量的調試，找到了問題的原因。
出現錯誤的項目並沒有安裝 Tailwind CSS，但在之前的幾周，我們使用了 Tailwind。
問題的原因如下：
他們在父文件夾中有一個 postcss.config.js 文件。或者在其路徑的其他父文件夾中，而不僅僅是直接的父文件夾。也可能是他們的主目錄。
類似下面這樣：
module.exports = {
plugins: {
autoprefixer: {},
},
}
重要提示：在他們目前的項目中，並沒有配置 PostCSS。
如果已經安裝了 PostCSS，則沒有問題。僅當你的當前項目根文件夾中沒有 postcss.config.js 時，才會出現此問題。
但是 Next.js 的 工具 看到了父文件夾中有一個 postcss.config.js 文件，並且執行了它，引發了此錯誤：
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css