[Bug]: Yarn 3 support?

Which Remix packages are impacted?

• remix (Remix core)
• create-remix

What version of Remix are you using?

1.0.5

Steps to Reproduce

Trying to install dependencies with Yarn berry. My current Yarn version is v3.2.0-rc.5.

Log file:

# This file contains the result of Yarn building a package (azat-io@workspace:.)
# Script name: postinstall

(node:67592) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
EROFS: read-only filesystem, open '/node_modules/remix/package.json'

Dependencies in my package.json:

{
  "dependencies": {
    "@remix-run/node": "1.0.5",
    "@remix-run/react": "1.0.5",
    "@remix-run/serve": "1.0.5",
    "@remix-run/server-runtime": "1.0.5",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "remix": "1.0.5"
  },
  "devDependencies": {
    "@remix-run/dev": "1.0.5",
    "@types/react": "17.0.24",
    "@types/react-dom": "17.0.9",
    "typescript": "4.1.2"
  }
}

Expected Behavior

Installation successful

Actual Behavior

Installation failed

[cmd-johnson]

I made some more progress! The build now runs fine with PnP and the dev server starts up correctly as well. To test my changes:

Clone and build my changed version of remix:

git clone https://github.com/cmd-johnson/remix/tree/feature/yarn-pnp
cd remix
yarn install
yarn build

In the project you want to use yarn PnP in:

• switch to the current canary build of yarn: yarn set version canary. Yarn < 3.2.0 has a bug preventing remix to work with PnP.
• remove the remix dependency from your package.json, it just doesn’t work with PnP right now (I’ll see what I can do about that next)
• while you’re at it, remove remix setup node from your postinstall script. It will fail when using PnP
• add a resolutions entry to your package.json:

    "resolutions": {
      "@remix-run/dev": "file:///path/to/the/cloned/remix/project/build/node_modules/@remix-run/dev",
      "@remix-run/express": "file:///path/to/the/cloned/remix/project/build/node_modules/@remix-run/express",
      "@remix-run/node": "file:///path/to/the/cloned/remix/project/build/node_modules/@remix-run/node",
      "@remix-run/react": "file:///path/to/the/cloned/remix/project/build/node_modules/@remix-run/react",
      "@remix-run/serve": "file:///path/to/the/cloned/remix/project/build/node_modules/@remix-run/serve"
    },
  

  This makes sure you’re using the patched @remix-run/* versions instead of the original ones throughout your whole project
• run yarn add @yarnpkg/esbuild-plugin-pnp. This is an optional peer dependency I’ve added to @remix-run/dev that you’ll need when using PnP for the esbuild build to go through
• run yarn add express. @remix-run/serve depends on it as a peer dependency. Depending on your setup, you might be able to get away with adding express as a peer dependency instead
• the last thing to change is fixing all imports from the remix package to imports from @remix-run/* packages. E.g.:
  • RemixBrowser → @remix-run/react/browser
  • EntryContext, MetaFunction → @remix-run/server-runtime (you might have to add a dependency to @remix-run/server-runtime to your project as well)
  • Most other dependencies appear to be exported by @remix-run/react

After that, you should be able to start the dev server using yarn dev as usual.

I hope I didn’t forget anything. I’ll draft a PR once I get around to get the remix package to work with PnP.

[cmd-johnson]

@tavoyne #1316 should be ready for merging, but feel free to test it yourself! Everything should work as long as you don’t import anything from the remix package and use the @remix-run/* packages directly instead. Also check out the README from the yarn example I added in the PR: https://github.com/remix-run/remix/blob/7af1ed35603839d85866d3d793ecc89c2244236b/examples/yarn-pnp/README.md