next.js: pnpm create next-app cli issue: TypeError: Cannot read properties of undefined (reading 'config')

Link to the code that reproduces this issue

To Reproduce

Create a new project with pnpm create next-app@latest
Try to run the project in dev mode with pnpm run dev

Current vs. Expected behavior

Current behavior

When I try to run the application in dev mode, I get the following error:

./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css
TypeError: Cannot read properties of undefined (reading 'config')
Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css
./app/globals.css
 ⨯ ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css
TypeError: Cannot read properties of undefined (reading 'config')
Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css
./app/globals.css
 ○ Compiling /_error ...
 ⨯ ./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css
TypeError: Cannot read properties of undefined (reading 'config')
Import trace for requested module:
./app/globals.css.webpack[javascript/auto]!=!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/.pnpm/next@13.5.4_react-dom@18.0.0_react@18.0.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/globals.css
./app/globals.css

Expected behaviour

Not to get the error and for the project to start in dev mode.

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:21:53 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6020
Binaries:
  Node: 18.13.0
  npm: 9.6.2
  Yarn: 1.22.19
  pnpm: 8.3.1
Relevant Packages:
  next: 13.5.5-canary.0
  eslint-config-next: 13.5.5-canary.0
  react: 18.0.0
  react-dom: 18.0.0
  typescript: 5.0.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

CLI (create-next-app)

Additional context

No response

About this issue

Original URL
State: closed
Created 9 months ago
Reactions: 12
Comments: 19 (6 by maintainers)

Commits related to this issue

build: update I was getting an error with my webpack builds, and I saw on vercel/next.js#56394 that updates had fixed the issue. — committed to Iron-E/winvoice-gui by Iron-E 9 months ago

Most upvoted comments

I just did a pnpm up and it seems to resolve the issue. Haven’t had time to track down the specific package needed to be updated.

+40

Kordonme on Oct 5, 2023

Had the same issue today and pnpm up seems to solve it. 👍🏼

ruymon on Oct 5, 2023

The same is happening here. Using PNPM with Typescript and Tailwind configured via create next-app. No changes were made to the code after installation.

carlosmfreitas2409 on Oct 4, 2023

I’ve just done another pnpm up and relaunched the project, and it finally worked.

tcisse on Oct 9, 2023

Looks like it’s the autoprefixer package. Updating it to latest seems to fix the issue

aetherplex on Oct 6, 2023

pnpm up solves the issue for me as well, these were the following changes that it did:

Downloading registry.npmjs.org/typescript/5.2.2: 7.23 MB/7.23 MB, done
Packages: +62 -70
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------
Progress: resolved 333, reused 305, downloaded 20, added 62, done

dependencies:
- react 18.0.0
+ react 18.2.0
- react-dom 18.0.0
+ react-dom 18.2.0

devDependencies:
- @types/node 20.0.0
+ @types/node 20.8.2
- @types/react 18.0.0
+ @types/react 18.2.25
- @types/react-dom 18.0.0
+ @types/react-dom 18.2.10
- autoprefixer 10.0.0
+ autoprefixer 10.4.16
- eslint 8.0.0
+ eslint 8.50.0
- postcss 8.0.0
+ postcss 8.4.31
- tailwindcss 3.0.0
+ tailwindcss 3.3.3
- typescript 5.0.2
+ typescript 5.2.2

Done in 7.1s

poppyseedDev on Oct 5, 2023