At Bootcamp, some students encountered an error that I couldn’t reproduce. When running npm run dev in a Next.js project, they received the following error message:

➜ 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'

The error message mentioned both tailwindcss and autoprefixer. Another possible error message is: Error: Your custom PostCSS configuration must export a plugins key. Unfortunately, these error messages aren’t very informative.

After extensive debugging, we finally identified the cause of the problem. The project where the error occurred did not have Tailwind CSS installed, even though it had been used in previous weeks.

The issue was related to the presence of a postcss.config.js file in the parent folder, or potentially in another parent folder along the file path (such as the home folder). Here’s an example of what the file might look like:

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

It’s important to note that the current project does not have PostCSS configured. If you have PostCSS installed, there should be no problem unless you don’t have a postcss.config.js file in the root folder of your current project.

However, Next.js’s tooling detects the presence of a postcss.config.js file in the parent folder and executes it, leading to the error message:

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

To fix this error, you have a few options:

  1. Install Tailwind CSS in your project by running npm install tailwindcss.
  2. Remove or rename the postcss.config.js file in the parent directory.
  3. Configure PostCSS in your current project by creating a postcss.config.js file in your project’s root folder.

I hope this helps you resolve the PostCSS Webpack error and get back to smooth development!

Tags: PostCSS, Webpack, Next.js, error fixing, Tailwind CSS