search

vercel / next.js

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

Turbopack doesn't support yarn PnP #42651

Open robko23 opened 1 year ago

robko23 commented 1 year ago

Verify canary release

Provide environment information

  Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT_DYNAMIC Wed Oct 26 15:55:21 UTC 2022
    Binaries:
      Node: 18.1.0
      npm: 8.8.0
      Yarn: 3.2.4
      pnpm: 7.14.2
    Relevant packages:
      next: 13.0.3-canary.1
      eslint-config-next: 13.0.2
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When creating new next app with yarn create next-app --experimental-app and enabling turbopack, it will result in several warnings and error:

warning - [other] 
  Could not resolve React Refresh runtime
  React Refresh will be disabled.
  To enable React Refresh, install the `react-refresh` and `@next/react-refresh-utils` modules.

warning - [other] 
  Could not resolve React Refresh runtime
  React Refresh will be disabled.
  To enable React Refresh, install the `react-refresh` and `@next/react-refresh-utils` modules.

warning - [other] 
  Could not resolve React Refresh runtime
  React Refresh will be disabled.
  To enable React Refresh, install the `react-refresh` and `@next/react-refresh-utils` modules.

error -
  [rendering]
    [root of the dev server]/
      Error during SSR Rendering
      Error: Cannot find module 'next/dist/server/node-polyfill-fetch'
        at <unknown> (.next/server/app/chunks/ssr/_4b5bba.js:83:15)
        at <unknown> (.next/server/app/chunks/ssr/_4b5bba.js:86:3)
        at [project-with-next]/app/entry (ecmascript, ssr) (.next/server/app/chunks/ssr/_4b5bba.js:313:3)
        at <unknown> (.next/server/app/chunks/ssr/_4b5bba.js:692:21)
        at runModuleExecutionHooks (.next/server/app/chunks/ssr/_4b5bba.js:730:5)
        at instantiateModule (.next/server/app/chunks/ssr/_4b5bba.js:691:5)
        at instantiateRuntimeModule (.next/server/app/chunks/ssr/_4b5bba.js:1276:12)
        at <unknown> (.next/server/app/chunks/ssr/_4b5bba.js:331:1)
        at <unknown> (.next/server/app/chunks/ssr/_4b5bba.js:1327:39)
        at <anonymous>
        at Object.registerChunk [as push] (.next/server/app/chunks/ssr/_4b5bba.js:1327:25)
        at Object.<anonymous> (.next/server/app/chunks/rsc/app_layout.tsx_layout-entry.tsx_with-client-chunks.js:1:41)
        at Module._compile (node:internal/modules/cjs/loader:1105:14)
        at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
        at Module.load (node:internal/modules/cjs/loader:981:32)
        at Module._load (node:internal/modules/cjs/loader:827:12)
        at Module.require (node:internal/modules/cjs/loader:1005:19)
        at require (node:internal/modules/cjs/helpers:102:18)
        at Object.<anonymous> (.next/server/app/index.js:12:1)
        at Module._compile (node:internal/modules/cjs/loader:1105:14)
        at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
        at Module.load (node:internal/modules/cjs/loader:981:32)
        at Module._load (node:internal/modules/cjs/loader:827:12)
        at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
        at <unknown> (node:internal/main/run_main_module:17:47)

  [resolve]
    [next]/entry/fallback.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

      Error resolving esm request
      unable to resolve module "react-dom" with subpath "/client"

    [next]/overlay/internal/ErrorBoundary.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/ReactDevOverlay.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    ... [24 more paths] are hidden, run with --show-all to show all

Expected Behavior

It should display default nextjs page after project creation

Link to reproduction

To Reproduce

  1. Run yarn create next-app --experimental-app
  2. edit package.json to "dev": "next dev --turbo",
  3. Run it with yarn dev

PACK-2244

balazsorban44 commented 1 year ago

Hi, following the reproduction steps, I cannot see any of those warnings. :thinking: Could you link to a public GitHub repository that we can use to investigate?

robko23 commented 1 year ago

I have had trouble recreating this issue on my work machine, however I managed to create dockerfile where the bug still is.

FROM node:18

RUN apt update

RUN apt install -y jq moreutils

RUN corepack enable

RUN corepack prepare yarn@stable --activate

RUN yarn create next-app --experimental-app --ts --eslint test

WORKDIR /test

RUN jq '.scripts.dev = "next dev --turbo"' package.json | sponge package.json

CMD yarn dev

To set it up run: docker build -t next-42651 .

docker run --rm -it -p 3000:3000 next-42651

balazsorban44 commented 1 year ago

Thanks, I could reproduce it with Yarn 2+. pnpm, Yarn 1, and npm work fine.

millsp commented 1 year ago

I am seeing this too in a pnpm monorepo

millsp commented 1 year ago

I found that in standalone/node_modules/next points to .pnpm/next@12.../next/dist/server/next-server.js. That file exists but none of its imports are present. This file is created right after I run pnpm exec next build, if I delete it then I can start my standalone server.

millsp commented 1 year ago

Same happens with npm workspaces. Also, both cases are without using turbopack.

belgattitude commented 1 year ago

Here's a reproduction with

See screenshots in https://github.com/belgattitude/artist/pull/4

git clone -b nextjs-turbopack-issue --single-branch https://github.com/belgattitude/artist.git
corepack enable
pnpm i
cd apps/web
pnpm dev --turbo
sokra commented 1 year ago

We currently don't support Yarn PnP, but you can use yarn config set nodeLinker node-modules to switch to normal node_modules mode for Yarn, which should work.

belgattitude commented 1 year ago

@sokra thanks for the reminder. Just to bring your attention that reproduction I sent above is with pnpm (not yarn pnp) in case you've missed it. I don't think so but... who knows 😄

oalexdoda commented 1 year ago

Error: Cannot find module 'next/dist/server/node-polyfill-fetch' ... when trying to load an app with Turbopack.

ForsakenHarmony commented 7 months ago

Just a note: this is currently very low priority as we would have to implement the whole pnp resolution for turbopack

arcanis commented 7 months ago

I already implemented the PnP resolution for Rust as a crate, in https://github.com/arcanis/pnp-rust. I'm very open to merge any change necessary to make it easier to use on your side.

christianjuth commented 6 months ago

The Trubo brand has done an amazing job of pushing monorepo tooling forward. Similarly PnP has been a big life improvement for managing a large monorepo. I believe lack of support for PnP would be a big miss for the Turbo brand as great monorepo compatible tooling.

Part of the Turbo philosophy is "never doing the same work twice". I believe Yarn Zero-installs operates under the same philosophy.

I understand that PnP is less popular then traditional node_modules, but a Turbo Pack + PnP combo would be a big quality of life improvement for large projects. I understand you have a lot more people to answer to then just us PnP folk, but I urge the team to reconsider support. Is it possible @arcanis existing work could be used to make PnP happen?

Thanks for all the hard work the teams does!