Yarn workspace @storybook/react not hoisted

[danvim]

Describe the bug I have a yarn workspace project. Running yarn workspace x storybook yields this error:

ERROR in ../node_modules/@storybook/addon-docs/dist/frameworks/react/config.js
Module not found: Error: Can't resolve '@storybook/react' in '/home/root_project_path/node_modules/@storybook/addon-docs/dist/frameworks/react'
 @ ../node_modules/@storybook/addon-docs/dist/frameworks/react/config.js 3:13-40
 @ ../node_modules/@storybook/addon-docs/react/config.js
 @ multi ../node_modules/@storybook/core/dist/server/common/polyfills.js ../node_modules/@storybook/core/dist/server/preview/globals.js ../node_modules/@storybook/addon-docs/dist/frameworks/common/../../../react/config.js ./.storybook/config.js ../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

I am not too familiar with how Yarn decides what packages to hoist. I have everything except @storybook/react hoisted to my root folder.

What I have under my workspace x is like so:

node_modules
├── @babel
│   ├── core
│   │   ├── lib
│   │   │   ├── config
│   │   │   │   ├── files
│   │   │   │   ├── helpers
│   │   │   │   └── validation
│   │   │   ├── tools
│   │   │   └── transformation
│   │   │       ├── file
│   │   │       └── util
│   │   └── node_modules
│   ├── plugin-syntax-flow
│   │   └── lib
│   ├── plugin-transform-flow-strip-types
│   │   └── lib
│   ├── plugin-transform-react-constant-elements
│   │   └── lib
│   └── preset-flow
│       └── lib
├── babel-plugin-named-asset-import
├── debug
│   ├── dist
│   └── src
├── ms
├── source-map
│   ├── dist
│   └── lib
└── @storybook
    └── react
        ├── bin
        ├── dist
        │   ├── client
        │   │   └── preview
        │   ├── demo
        │   └── server
        └── node_modules
            └── semver
                └── bin

To Reproduce Steps to reproduce the behavior:

1. Initialize storybook react under a yarn workspace x
2. yarn workspace x storybook

Expected behavior Runs without error

System:

Environment Info:

  System:
    OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
  Binaries:
    Node: 12.14.0 - /usr/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.13.4 - /usr/bin/npm
  Browsers:
    Chrome: 79.0.3945.88
    Firefox: 71.0
  npmPackages:
    @storybook/react: ^5.2.8 => 5.2.8 
  npmGlobalPackages:
    @storybook/cli: 5.2.8

[mckn]

I have the same issue

[mckn]

So I got it resolved by removing the react-is from the workspace package.json. See if it helps.

[danvim]

@mckn I don't believe I have react-is installed though. I currently still have to use cd x && yarn storybook for it to work. Let me see if rerunning yarn upgrade works.

EDIT: It still didn't work.

[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!

[danvim]

Is nobody having the same problem with yarn package manager?

[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!

[bastienrobert]

Not hoisted here too, I'm investigating.

[raroul]

It seems that there is a bug with @storybook/react and workspaces. A workaround could be to disable hoisting for storybook in the root package.json of your workspace. No more errors after that for me.

More infos here: https://classic.yarnpkg.com/blog/2018/02/15/nohoist/

{
  "private": true,
  "workspaces": {
    "packages": [
      "*"
    ],
    "nohoist": [
      "@storybook",
      "**/@storybook",
      "**/@storybook/**"
    ]
  }
}

[shilman]

@raroul there are bunch of yarn 2 related fixes that @gaetanmaisse has been working on, available in 6.0. hopefully these will make the workaround unnecessaruy.

[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!

[delucca]

Any updates on this? @raroul works, but it would be good to have a real fix :)

[gaetanmaisse]

@delucca we fixed some issues related to Storybook usage in a monorepo a few weeks ago, can you try the latest 6.1 alpha and let us know if you still face the issue?

[guyzmo]

@gaetanmaisse I'm switching to a monorepo setup (from a multirepo with a mess of yarn links) and I'm hitting that issue, for each component I have a story for:

@my/component_pkg: Module not found: Error: You attempted to import /absolute/path/to/workspaces/root/node_modules/react-dom/server which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
@my/component_pkg: You can either move it inside src/, or add a symlink to it from project's node_modules/.
@my/component_pkg:  @ ./src/components/SomeComponent.tsx 9:0-50 155:55-69

I'm running:

• lerna 3.22.1 (configured to use yarn workspaces)
• yarn 1.22.10
• storybook: 6.1.11
• @storybook/preset-create-react-app: 3.1.5
• react 16.13.1

I've tried @raroul's solution, but no luck with that.

Though, it's not impossible that my issue is due to an existing configuration of @my/component_pkg that helped with the old yarn link mess.

[gaetanmaisse]

@guyzmo, a few days ago we merged and released in an alpha version (@storybook/preset-create-react-app@3.1.6-alpha.0) a big fix about react-script + Storybook + Yarn workspace. You can maybe give it a try it might help but I'm not 100% sure the issue is coming from Storybook stuff 🤔 , do you still have some yarn link somewhere?