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

> [email protected] 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