Website documentation: preact/compat with Yarn PnP

[jamesrr39]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
When running a Node script, which imports react-query and has preact in the same project, through Yarn 3.6.3 with PnP enabled, I get this error:

Error: @tanstack/react-query tried to access react (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

Adding the recommendation from the Preact compat "Aliasing in Node" section didn't help, however after doing some digging I found this thread: yarnpkg/berry#1621
Suffixing with dependencies with @* worked and I was able

{
  "dependencies": {
    "react": "npm:@preact/compat@*",
    "react-dom": "npm:@preact/compat@*",
  }
}

To Reproduce

Steps to reproduce the behavior:

1. Use yarn create to start a new project, and yarn set version stable to set it to the latest stable yarn (with PnP enabled)
2. Run yarn add preact @tanstack/react-query
3. Create a node script, and run it through tsx.
4. Observe the error message above, complaining of react not being provided.

Expected behavior
Expected/suggested: add to https://preactjs.com/guide/v10/getting-started#aliasing-react-to-preact) a note, e.g.:

If using Yarn PnP, suffix @* on the dependency versions, i.e.:

{
  "dependencies": {
    "react": "npm:@preact/compat@*",
    "react-dom": "npm:@preact/compat@*",
  }
}

[rschristian]

This feels like something they should support, I'm apprehensive about adding per-package manager instructions too, on top of the build tool selection.

[jamesrr39]

Thanks for transferring this issue to the correct project.

I agree that ideally Yarn should support this (would've saved me some time and digging aside from anything else), and it's unfortunate it doesn't work out of the box. But I think this should be on the Preact compatibility page.

Two reasons as to why:

• As I understand it, the page is meant to help smooth the transition and reduce the "it just doesn't work" element of moving to Preact. This information would help people transition (and even if Yarn released a fix for this tomorrow, everyone working on a project with a previous version of Yarn would still be affected).
• The error message given (can't find React) looks a lot like a Preact compatibility error (to someone who knows they are using libraries built for React, but actually this project is using Preact). So the Preact capability page is a natural place to go pretty quickly as to how to correct the error.

[rschristian]

I'd still say this is better addressed in a bug report to Yarn, but if you wanted to add a footnote to the aliasing in Node section for Yarn, I'd accept it.