Skip to content

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

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about tools: