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.

I was directly run the npm run dev and didn't do any modification on the project @H9ee — Bayu
– Bayu, Commented Feb 15, 2022 at 14:07
i dont know what are doing to install next js , but try to install this pakage : npm install postcss-flexbugs-fixes postcss-preset-env — H9ee
– H9ee, Commented Feb 15, 2022 at 14:11
Thank you for the reply, unfortunately it didn't change anything and still returns an error @H9ee I'll try again with yarn — Bayu
– Bayu, Commented Feb 15, 2022 at 14:56
Two things that I would try here: 1. Remove your next.js cache: rm -rf .next 2. make sure if you installed your project with yarn, then try to run your project with yarn dev (you mentioned running yarn dev in your question but mentioned npm run dev in your comment). — elethan
– elethan, Commented Feb 15, 2022 at 15:48

ICeZer0 · Accepted Answer · 2023-04-05 17:03:22Z

10

Create a postcss.config.js file in the root directory of your NextJS project.

Example code:

module.exports = {
 plugins: {
 },
}

edited Apr 5, 2023 at 17:03

answered Sep 3, 2022 at 17:49

ICeZer0

6085 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Spiral Out Over a year ago

It worked in my case, as is, even without any plugins defined

Interstellar CG · Accepted Answer · 2022-05-22 03:25:30Z

4

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

answered May 22, 2022 at 3:25

Interstellar CG

411 bronze badge

2 Comments

Yasir Over a year ago

-del postcss.config.js

Chris Over a year ago

In my case, I forgot that I had installed postcss and was not using it. After deleting the postcss.config.js issue is resolved.

Linda Paiste · Accepted Answer · 2022-10-02 21:43:08Z

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

answered Oct 2, 2022 at 21:43

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

Comments

Bayu · Accepted Answer · 2022-02-17 16:09:07Z

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.

answered Feb 17, 2022 at 16:09

Bayu

911 gold badge1 silver badge10 bronze badges

Comments

MAX · Accepted Answer · 2022-04-21 08:38:04Z

1

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

answered Apr 21, 2022 at 8:38

MAX

1374 bronze badges

1 Comment

Bayu Over a year ago

That was weird, but also that didn't work in my case. I have to change the directory project to make it work

Todd · Accepted Answer · 2023-01-27 11:28:47Z

1

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

answered Jan 27, 2023 at 11:28

Todd

191 bronze badge

Comments

Daniel Danielsson · Accepted Answer · 2023-05-21 03:53:59Z

1

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

answered May 21, 2023 at 3:53

Daniel Danielsson

111 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

krishnA tiwari · Accepted Answer · 2023-10-05 17:10:38Z

1

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.

answered Oct 5, 2023 at 17:10

krishnA tiwari

1971 silver badge9 bronze badges

Comments

isMattCoding · Accepted Answer · 2023-11-10 13:47:14Z

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 :)

shayaliza · Accepted Answer · 2024-04-28 05:11:49Z

1

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

answered Apr 28, 2024 at 5:11

shayaliza

112 bronze badges

Comments

jafar · Accepted Answer · 2023-03-20 16:45:51Z

0

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!

answered Mar 20, 2023 at 16:45

jafar

1411 silver badge7 bronze badges

Comments

andriiokhrimenko.github.io · Accepted Answer · 2023-05-18 09:18:26Z

0

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

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

answered May 18, 2023 at 9:18

andriiokhrimenko.github.io

1

Comments

Nicolò Gasparini · Accepted Answer · 2023-07-21 12:42:09Z

0

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

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

edited Jul 21, 2023 at 12:42

Nicolò Gasparini

2,4063 gold badges29 silver badges58 bronze badges

answered Jul 14, 2023 at 16:21

Dare Ace Rex

15 bronze badges

Comments

mcastillo · Accepted Answer · 2023-08-09 17:00:59Z

0

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

answered Aug 9, 2023 at 17:00

mcastillo

12 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Mudasser · Accepted Answer · 2023-10-11 15:52:51Z

0

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.

answered Oct 11, 2023 at 15:52

Mudasser

313 bronze badges

1 Comment

PooriaSetayesh Over a year ago

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review

Dalorzo · Accepted Answer · 2023-10-23 14:04:12Z

0

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.

edited Oct 23, 2023 at 14:04

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

answered Jan 21, 2023 at 14:53

shaff khan Yousafzai

11 bronze badge

Comments

Archil Labadze · Accepted Answer · 2025-03-18 13:27:57Z

0

i just had to install @tailwindcss/postcss as dependency and updated my

postcss.config.js to

    module.exports = {
    plugins: {
        "@tailwindcss/postcss": {},
        autoprefixer: {},
    },
 }

and the error disappeared

edited Mar 18 at 13:27

Archil Labadze

4,3454 gold badges29 silver badges47 bronze badges

answered Mar 18 at 1:14

Simon Asarga

1

Collectives™ on Stack Overflow

NextJS getting error on the first npm run dev

17 Answers 17

1 Comment

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

1 Comment

2 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related