Fix a PostCSS Webpack error ruleSet rules oneOf... etc etc

If you get a webpack error mentioning ruleSet[1].rules[3].oneOf[8] and postcss-loader in a Next.js project, look for a postcss.config.js file in a parent folder of your project. That stray file is most likely the cause.

Here’s the full story.

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 for other students it was autoprefixer.

Or, this error too: Error: Your custom PostCSS configuration must export a plugins key.

Not a very helpful error!

What causes the error?

After much debugging, we found the cause.

The project where the error appeared didn’t have Tailwind CSS installed. But in the weeks before, we had used Tailwind in other projects.

They had a postcss.config.js file in a parent folder. Not necessarily the direct parent. It could be anywhere up the path, even the home folder.

Something like this:

module.exports = {
  plugins: {
    autoprefixer: {},
  },
}

Why does a file that far away matter? The tooling that loads the PostCSS configuration doesn’t stop at your project root. If it finds no config there, it keeps walking up the directory tree until it finds one.

So Next.js picked up that old config, tried to load its plugins, and failed. The project had no tailwindcss or autoprefixer installed, because it never needed them.

Notice this only bites you when your current project has no postcss.config.js of its own. A config in your project root wins, and the search stops there.

How to fix it

Find the stray file. Starting from your project folder, check each parent folder:

ls ../postcss.config.js ../../postcss.config.js ~/postcss.config.js

Then delete it, or move it back into the project that actually uses it. That file was probably created by mistake in the wrong folder in the first place.

The error should disappear on the next npm run dev.

One more tip: this same “config found in a parent folder” problem can happen with other tools that search up the tree for their configuration. If a project misbehaves in ways you can’t explain, checking your home folder for leftover config files is a good habit.