Failed to complie and load Server, SyntaxError: Invalid regular expression

ChielokaCode commented 2 months ago

Link to the code that reproduces this issue

https://github.com/ChielokaCode/nextjs-issue-reproduction

To Reproduce

Anytime I run npm update or npm install next@latest to version ^14.2.5. I noticed the project refuses to compile and start server. This is the Error response

▲ Next.js 14.2.5

Local: http://localhost:3000
Environments: .env

SyntaxError: Invalid regular expression: /[/\]node_modules/\[/\]/: Nothing to repeat at new RegExp () at getBaseWebpackConfig (/Users/wikiwoo/Desktop/rustLearn/dvillaLocalFoodStore2/node_modules/next/dist/build/webpack-config.js:647:36) at /Users/wikiwoo/Desktop/rustLearn/dvillaLocalFoodStore2/node_modules/next/dist/server/dev/hot-reloader-webpack.js:530:48 at async Span.traceAsyncFn (/Users/wikiwoo/Desktop/rustLearn/dvillaLocalFoodStore2/node_modules/next/dist/trace/trace.js:154:20) at async Span.traceAsyncFn (/Users/wikiwoo/Desktop/rustLearn/dvillaLocalFoodStore2/node_modules/next/dist/trace/trace.js:154:20) at async HotReloaderWebpack.start (/Users/wikiwoo/Desktop/rustLearn/dvillaLocalFoodStore2/node_modules/next/dist/server/dev/hot-reloader-webpack.js:621:37) at async startWatcher (/Users/wikiwoo/Desktop/rustLearn/dvillaLocalFoodStore2/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js:156:5) at async setupDevBundler (/Users/wikiwoo/Desktop/rustLearn/dvillaLocalFoodStore2/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js:775:20) at async Span.traceAsyncFn (/Users/wikiwoo/Desktop/rustLearn/dvillaLocalFoodStore2/node_modules/next/dist/trace/trace.js:154:20) at async initialize

Current vs. Expected behavior

I tried configuring the next.config.js and tsconfig.json to try to isolate the problem but instead got more issues with _app.tsx.

Finally, I checked on some forums and it was discovered that next js latest 14.2.5 might have the issue

I solved the problem by going down to a older version 13.1.1 by doing these steps

Go to package.json under dependencies "next" and manually change the version from 14.2.5 to older version preferably 13.1.1
Next delete Package-lock.json and node_modules.
Run "npm install" to build back the package-lock.json and node_modules.
Now the error is fixed, Run "npm run dev" to start server

This is for an existing project not a newly created project

I hope this issue gets fixed

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Wed Apr 24 06:02:02 PDT 2024; root:xnu-8020.240.18.708.4~1/RELEASE_X86_64
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 13.5.6
  eslint-config-next: 13.5.6
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

warn  - Latest canary version not detected, detected: "13.5.6", newest: "15.0.0-canary.111".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.

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

create-next-app, Image (next/image), Script (next/script), Webpack

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

next dev (local), next start (local)

Additional context

I just tried reinstalling the next 14.2.5 verion again and still got the "SyntaxError: Invalid regular expression:" Noting to repeat error on the same project and when i reinstalled to the previous 13.1.1 version again, the error went away

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.6.0: Wed Apr 24 06:02:02 PDT 2024; root:xnu-8020.240.18.708.4~1/RELEASE_X86_64 Available memory (MB): 8192 Available CPU cores: 4 Binaries: Node: 20.9.0 npm: 10.1.0 Yarn: 1.22.22 pnpm: N/A Relevant Packages: next: 14.2.5 eslint-config-next: 13.5.6 react: 18.3.1 react-dom: 18.3.1 typescript: 5.5.4 Next.js Config: output: N/A

icyJoseph commented 2 months ago

The problem is this bit:

let nextConfig = {
  transpilePackages: [
    // Fix for warnings about cjs/esm package duplication
    // See: https://github.com/polkadot-js/api/issues/5636
    '**@polkadot/**',
  ],
}

Is it feasible for you to change to:

let nextConfig = {
  transpilePackages: [
    // Fix for warnings about cjs/esm package duplication
    // See: https://github.com/polkadot-js/api/issues/5636
    '@polkadot',
  ],
}

samcx commented 2 months ago

Not sure if we even allow for regular expressions in transpilePackages → https://github.com/vercel/next.js/discussions/51293.

It may be that an earlier version was just not surfacing the error.

vercel / next.js