NextJS getting error on the first npm run dev - reactjs

Question

I don't know what is going on with my PC but every time I create the NextJS application and run development. It will return this error
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
TypeError: Cannot read property 'config' of undefined
(node:20136) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
wait - compiling /_error (client and server)...
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
TypeError: Cannot read property 'config' of undefined
at runMicrotasks (<anonymous>)
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename 'C:\laragon\www\bayu-personal-website\.next\cache\webpack\client-development-fallback\0.pack_' -> 'C:\laragon\www\bayu-personal-website\.next\cache\webpack\client-development-fallback\0.pack'
I can't find any cause of this error on my project because it happened after I run yarn create-next-app and yarn dev. Thank you in advance.

Answer 1

Create a postcss.config.js file in the root directory of my NextJS project, fixed it for me.
Example code
module.exports = {
plugins: {
},
}

Answer 2

I manage to create the nextJS project on Users/ directory and it turns out to fix the error. Before that, I created the project outside of Users/ directory (directly on C: and create folder on there). So maybe it was a permission thing that make the project can't run.

Answer 3

I dont really know why, but I installed postcss-loader, css-loader and also created a config file for postcss, postcss.config.js and then the server ran successfully!!
try out that too, I think postcss.config.js is the problem

Answer 4

I was facing the same problem and i fixed it by restarting the IDE AND IT JUST WORK !!

Answer 5

I got a very similar error while updating Tailwind from v2 to v3: TypeError: Cannot read property 'config' of undefined. This was also caused by the postcss.config.js file, as others have suggested. I needed to remove '#tailwindcss/jit': {} from the plugins section. My working config is now:
module.exports = {
plugins: {
autoprefixer: {},
},
}

Answer 6

Run this command in CLI : npm install postcss-flexbugs-fixes postcss-preset-env --save-exact
in postcss.config.js file , write following code:
module.exports={
"plugins" :[
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
and you are done ... this worked for me.

Answer 7

Need to create a postcss.config.js file in your root directory if it isnt there from init.
"PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more." from postcss Github
postcss.config.js:
module.exports = {
plugins: {
},
}