Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.
Some students in 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 we’ve also seen autoprefixer in the error.
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 we had used Tailwind in the weeks before.
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 they’re working on 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 Next.js tooling sees there’s a postcss.config.js file in the parent folder and executes it, which raises 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