vercel / next.js

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

Cannot use local Next.js build as Next.js Dev Server (v14.2.6) #69316

Open Ethan-Arrowood opened 2 months ago

Ethan-Arrowood commented 2 months ago

Link to the code that reproduces this issue

https://github.com/Ethan-Arrowood/next-dev-server-issue

To Reproduce

Reproduction

I'm running this on a Mac M3 Sonoma 14.6.1

  1. Clone vercel/next.js

  2. Check out tag v14.2.6 with git checkout tags/v14.2.6

  3. (Install deps and build Next.js locally) Run pnpm i, then cd packages/next-swc, pnpm build-native, and then cd ../.. and pnpm build

  4. Link it locally, npm link

  5. Clone this repo

  6. Within next-app, run npm i - no need to link Next.js locally here

  7. Within next-server, run npm i and npm link next

  8. Run the server with node server.js (use Node v20)

Visit localhost:3000, you'll see Invariant: Expect to replace at least one import in the console:

testing/next-dev-server-issue/next-server via  v20.16.0 took 3s 
❯ node server.js
> Ready on http://localhost:3000
 ○ Compiling / ...
 ⨯ app/page.js
Invariant: Expected to replace at least one import
 ⨯ ../../../next.js/packages/next/dist/client/components/not-found-error.js
Invariant: Expected to replace at least one import
 ⨯ ../../../next.js/packages/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F_error&preferredRegion=&absolutePagePath=..%2F..%2F..%2Fnext.js%2Fpackages%2Fnext%2Fdist%2Fpages%2F_error.js&absoluteAppPath=next%2Fdist%2Fpages%2F_app&absoluteDocumentPath=next%2Fdist%2Fpages%2F_document&middlewareConfigBase64=e30%3D!
Error: Invariant: Expected to replace at least one import
 GET / 500 in 2497ms
^C

Now if you just use the npm installed next@14.2.6 dependency, everything works fine. But not being able to do this with a locally built version of Next.js is preventing me from debugging other things.

This error is coming from here: https://github.com/vercel/next.js/blob/v14.2.6/packages/next/src/build/load-entrypoint.ts#L83

I used a debugger on the local Next.js build, and discovered that when load-entrypoint.ts is executing, the template file it receives contains ' characters instead of the " the regex is expecting. This makes me think its something with how I'm building Next.js locally? See the following screenshot for more info:

debug-screenshot

Current vs. Expected behavior

I expect this to work locally just like when I use the Next.js dependency from npm install.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6030
  Available memory (MB): 18432
  Available CPU cores: 12
Binaries:
  Node: 20.16.0
  npm: 10.8.1
  Yarn: 1.22.22
  pnpm: 9.7.0
Relevant Packages:
  next: 14.2.6 // Latest available version is detected (14.2.6).
  eslint-config-next: 14.2.6
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
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

👋 Hi friends, hope all is well on the team. I had a feeling I'd be collaborating with y'all again 💙

Ethan-Arrowood commented 2 months ago
Screenshot 2024-08-26 at 11 48 15 AM

The same template file uses " when it comes from npm install (instead of locally linking)