vercel / next.js

The React Framework
https://nextjs.org
MIT License
122.65k stars 26.25k forks source link

`npm run dev` fails with custom `.babelrc` file #66997

Open matt-pawley opened 1 week ago

matt-pawley commented 1 week ago

Link to the code that reproduces this issue

https://github.com/matt-pawley/nextjs-babel-issue

To Reproduce

  1. Run npx create-next-app@latest
  2. Select all default options
  3. Create .babelrc file (following format detailed here - https://nextjs.org/docs/pages/building-your-application/configuring/babel)
  4. Run npm run dev

Current vs. Expected behavior

Startup fails with the following error:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:406:5)
    at validateString (node:internal/validators:162:11)
    at Object.dirname (node:path:1279:5)
    at getBabelLoader (/redacted/nextjs-babel-issue/node_modules/next/dist/build/webpack-config.js:359:39)
    at getBaseWebpackConfig (/redacted/nextjs-babel-issue/node_modules/next/dist/build/webpack-config.js:366:6)
    at HotReloaderWebpack.buildFallbackError (/redacted/nextjs-babel-issue/node_modules/next/dist/server/dev/hot-reloader-webpack.js:549:65)
    at async DevBundlerService.getFallbackErrorComponents (/redacted/nextjs-babel-issue/node_modules/next/dist/server/lib/dev-bundler-service.js:25:9)
    at async DevServer.getFallbackErrorComponents (/redacted/nextjs-babel-issue/node_modules/next/dist/server/dev/next-dev-server.js:593:9)
    at async DevServer.renderErrorToResponseImpl (/redacted/nextjs-babel-issue/node_modules/next/dist/server/base-server.js:2210:40)
    at async DevServer.pipeImpl (/redacted/nextjs-babel-issue/node_modules/next/dist/server/base-server.js:920:25)
    at async NextNodeServer.handleCatchallRenderRequest (/redacted/nextjs-babel-issue/node_modules/next/dist/server/next-server.js:231:21)
    at async DevServer.handleRequestImpl (/redacted/nextjs-babel-issue/node_modules/next/dist/server/base-server.js:816:17)
    at async /redacted/nextjs-babel-issue/node_modules/next/dist/server/dev/next-dev-server.js:339:20
    at async Span.traceAsyncFn (/redacted/nextjs-babel-issue/node_modules/next/dist/trace/trace.js:154:20)
    at async DevServer.handleRequest (/redacted/nextjs-babel-issue/node_modules/next/dist/server/dev/next-dev-server.js:336:24)
    at async invokeRender (/redacted/nextjs-babel-issue/node_modules/next/dist/server/lib/router-server.js:174:21)
    at async handleRequest (/redacted/nextjs-babel-issue/node_modules/next/dist/server/lib/router-server.js:353:24)
    at async requestHandlerImpl (/redacted/nextjs-babel-issue/node_modules/next/dist/server/lib/router-server.js:377:13)
    at async Server.requestListener (/redacted/nextjs-babel-issue/node_modules/next/dist/server/lib/start-server.js:141:13) {
  code: 'ERR_INVALID_ARG_TYPE'
}

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:13:18 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.21
  pnpm: 8.11.0
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Developer Experience

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

next dev (local)

Additional context

New to Next.js... It could be a user error, but would suggest the docs or error message could be clearer if that is the case.

matt-pawley commented 1 week ago

I realised the actual problem was above this:

Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present.

Simply removing next/font references resolves the issue.

However, the debugging experience can be improved, therefore I have opened #67003.