Fix a PostCSS Webpack error ruleSet rules oneOf... etc etc
How to fix the error `ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css cannot find module`
Some students of my Bootcamp had a problem that I couldn’t replicate in any way.
Upon running npm run dev
in a Next.js project, they had this error:
➜ rest-api git:(main) npm run dev
> rest-api@0.1.0 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'
In the last line tailwindcss
appears but also autoprefixer
happened.
Or, this error too: Error: Your custom PostCSS configuration must export a plugins key.
Not a very helpful error!
After much debugging, the cause of the problem was discovered.
The project where the error appeared didn’t have Tailwind CSS installed, but during the weeks before, we used Tailwind.
What happened was this.
They had a postcss.config.js
file in the parent folder. Or in another parent folder in their path, not just the direct parent. Maybe their home folder.
Something like this:
module.exports = {
plugins: {
autoprefixer: {},
},
}
Important: in the project that they’re now, there’s no PostCSS configured.
If you have PostCSS installed, there’s no problem. Only if you don’t have postcss.config.js
in your current project root folder.
But the tooling of Next.js sees there’s a postcss.config.js
file in the parent folder, and executes it.
Raising this error:
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
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025