/

修復 PostCSS Webpack 錯誤 ruleSet rules oneOf... 等等

修復 PostCSS Webpack 錯誤 ruleSet rules oneOf… 等等

如何修復錯誤 ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css 找不到模組

我的一些學員在進行 Next.js 項目的 npm run dev 時遇到了一個我無法重現的問題。

他們遇到了如下錯誤：

1
2
3
4
5
6
7
8
9
10
➜ 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 文件。或者在其路徑的其他父文件夾中，而不僅僅是直接的父文件夾。也可能是他們的主目錄。

類似下面這樣：

1
2
3
4
5
module.exports = {
 plugins: {
 autoprefixer: {},
 },
}

重要提示：在他們目前的項目中，並沒有配置 PostCSS。

如果已經安裝了 PostCSS，則沒有問題。僅當你的當前項目根文件夾中沒有 postcss.config.js 時，才會出現此問題。

但是 Next.js 的 工具 看到了父文件夾中有一個 postcss.config.js 文件，並且執行了它，引發了此錯誤：

1
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

tags: [“PostCSS”, “Webpack”, “Next.js”]