If you have recently updated an old Next.js application and encounter the following error when running npm run dev
:
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
Error: Your custom PostCSS configuration must export a `plugins` key.
Fortunately, this error can be easily fixed. Here’s what you need to do:
-
Create a
postcss.config.json
file in the root directory of your Next.js application if it doesn’t already exist. -
Open the
postcss.config.json
file and add the following content:
{
"plugins": [
// Add your PostCSS plugins here
]
}
- Save the file and restart your Next.js application.
By including a plugins
key with an empty array in the postcss.config.json
file, you ensure that the PostCSS configuration is correctly exported. This resolves the error and allows your application to run without any issues. Make sure to add any necessary PostCSS plugins within the plugins
array in the postcss.config.json
file as per your project requirements.
Tags: PostCSS, Next.js, CSS, development, configuration