Storybook: Yarn 2: preset-create-react-app doesn't work with Yarn v2 monorepo + hoisting/PnP

[zeorin]

I've got a Yarn v2 monorepo where I've got my React app as a package (at packages/client), and a component library as a separate package (at packages/components), where I'm using Storybook.

I'm not using Yarn's PnP resolution (I'm using the fallback node modules plugin).

I have added react-scripts as a dependency of my component library package.

However, the packages are still hoisted to the monorepo root's node_modules folder.

This means that preset-create-react-app cannot find the react-scripts package.

getReactScriptsPath looks for the package by finding the executable and then following the symlink to the package directory. Yarn's node-modules plugin currently doesn't place the executables where we'd expect them to be (it doesn't place them at all).

Theoretically, I should be able to specify the react-scripts package as if it were a custom one. The problem is that the official react-scripts doesn't resolve because its package.json doesn't have a main field, and this throws an exception.

I've worked around this by manually symlinking packages/components/node_modules/.bin/react-scripts -> ../../../../node_modules/react-scripts/bin/react-scripts.js, which works well enough for me, but I have concerns for Windows users.

It'd be nice to be able to manually provide scriptsPath as an option to the preset instead, sidestepping the need for a symlink.

However, as more people move to Yarn v2 and adopt PnP, there will be no node_modules folder at all, and react-scripts won't resolve. I suspect this will be a problem even for users that are not in a monorepo setup. A different resolution strategy will be needed.

[gaetanmaisse]

@zeorin I worked on making SB CRA Preset compatible with Yarn 2 a few days ago, the PR is open and should be merged soon 😉 : https://github.com/storybookjs/presets/pull/104. I will tell you as soon as it will be released.

More globally, you can follow the WIP about Yarn 2 compatibility in this issue: https://github.com/storybookjs/storybook/issues/9527.

[gaetanmaisse]

@zeorin https://github.com/storybookjs/presets/pull/104 has been merged and released so as of 2.1.0 @storybook/preset-create-react-app should handle Yarn 2 out of the box!

[zeorin]

Please reopen this issue, it is not solved:

getReactScriptsPath does not seem to have been changed so that it can deal with hoisted node_modules folders, nor can it resolve a "custom" react-scripts package (since react-scripts does not have a main field in its package.json Node's built-in require.resolve will not be able to resolve it).

In my case I'm using Yarn's node-modules plugin, _not_ PnP, so the issue still persists for me.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[zeorin]

Still an issue for me. What's especially annoying is that Yarn 2 keeps deleting the symlink whenever it touches the package that contains it.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[zeorin]

Still an issue for me.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[malyw]

@zeorin Wondering, is it still an issue?

[zeorin]

I presume it is, but I am no longer involved with the project in which this issue manifested itself. :man_shrugging: