Use yarn 3.x pnp with Remix framework

[meglio]

Remix version: 1.7.1

Steps to Reproduce

Create a simple test.jsx Remix route:

import { json } from "@remix-run/node";

export default function SomePage(props) {
    return <div>
        Page
    </div>
}

Then yarn dev.

Expected Behavior

No errors in developer console.

Actual Behavior

Error in developer console:

package.json

{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "start": "remix-serve build"
  },
  "dependencies": {
    "@remix-run/node": "^1.7.1",
    "@remix-run/react": "^1.7.1",
    "@remix-run/serve": "^1.7.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.7.1",
    "@remix-run/eslint-config": "^1.7.1",
    "eslint": "^8.20.0"
  },
  "engines": {
    "node": ">=14"
  },
  "packageManager": "[email protected]"
}

Yarn and Node

• node version: 18.9.0
• Yarn: 3.x

NB. I tried creating the project with using Yarn 1.x and it worked fine. The problem appears after migrating to yarn 3.x

Might be related:

#638 (comment)

Looks like Yarn 3.x supports ESM module loading. So I tried the following in my .yarnrc.yml file, following the recommendations from the link above:

yarnPath: .yarn/releases/yarn-3.2.3.cjs
pnpEnableEsmLoader: true
nodeLinker: "pnp"

But this did not help.

So, the thread above makes me think that yarn 3.x should work with Remix. But it does not. I'm wondering if this is Remix or Yarn issue?

[RDIL]

I tried to reproduce (https://github.com/RDIL/remix-pnp-test) but was unable to. Can you try with my repository and see if it works for you? If it does, it sounds like something isn't right with your specific setup.

[meglio]

@RDIL looking at your code, can't find where you do
import { json } from "@remix-run/node";

Could you please double-check you have a test.jsx like the one from my original report, and then try accessing that page in your browser. That's when the error is thrown.

Just create that page in the routes folder.

[RDIL]

Huh, yeah, that does cause it.

I don't think this is PnP's fault though. It looks like remix is doing a lot of really strange stuff at runtime to get this all working. I think it's worth opening an issue in the Remix repository, as I don't entirely understand how it's doing things/where it is even trying to access fs/promises from.

[meglio]

Let's try: remix-run/remix#4236

[meglio]

@RDIL , there's an update in that issue, could you please check if it makes any difference? Thank you.

remix-run/remix#4236 (comment)

[RDIL]

Yeah, that seems to fix it. See RDIL/remix-pnp-test@9be5faf for a patch that can resolve the issue.

[meglio]

Great, so is this something the Yarn team would take over and complete, or is it something that the Remix team needs to improve in their code?

[RDIL]

It's on Remix's end, not ours.