NextJS getting error on the first npm run dev

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 your NextJS project.

Example code:

module.exports = {
 plugins: {
 },
}

Answer 2

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 3

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 4

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 5

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

Answer 6

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: {
 },
}

Answer 7

I hade the same issue, and solved it by updating node version. At the time of writing, v18.16.0 is working.

Answer 8

In my case i deleted the postcss.config.js and restart my server. I removed all the styling code in global.css except @tailwind base; @tailwind components; @tailwind utilities; . It works and compiled successfully for my device.

Answer 9

While using NextJs with tailwind, I had this error logging in the console, which led me to this thread:

./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/index.css Warning (1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

Then I checked my terminal, where I found this error:

warn - As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default.
warn - Remove it from the `plugins` array in your configuration to eliminate this warning.
warn  - ./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/index.css
Warning

(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

I found a solution here, which led me to upgrade some packages as recommended by icc97enter link description here

yarn add --dev tailwindcss@latest \
  @tailwindcss/typography@latest \
  @tailwindcss/forms@latest \
  @tailwindcss/aspect-ratio@latest \
  @tailwindcss/line-clamp@latest \
  postcss@latest \
  autoprefixer@latest

This resolved the error, but I wanted to test to see if I could recreate the error in order to push a fix to my repo. But when I deleted node_modules and yarn.lock, ran a yarn cache clean and a yarn install, the error didn't reappear.
It seems that just running the above upgrade, despite removing them right after, fixed the issue. I welcome any explanations by anyone more experienced than me :)

Answer 10

I started doing other projects of node version 20, It was the issue So i changed the node version to previous version and tried again and it works

nvm use 18.17.1

Answer 11

in my case I had uninstalled tailwindcss but forgot to delete it from postcss.config.js, so I delete it from there too, then I delete .next folder & it worked!

Answer 12

I fix same error by adding double quotation marks to fields in postcss.config.js:

module.exports = { plugins: [ "tailwindcss", "postcss-nesting", "autoprefixer" ] }

Answer 13

Change what you have in your tailwind.config.js to

*plugins: [
 require('@tailwindcss/forms/src/index'),
],*

Answer 14

Updating node version up to the latest LTS worked for me.

Answer 15

I have also encountered this issue, even though I have a postcss.config.js, and I resolved it by simply switching to the latest version of Node. In my case, it was version 18.12.0.

Answer 16

1. Run this command in CLI : npm install postcss-flexbugs-fixes postcss-preset-env --save-exact

2. 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.