Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Yarn workspace @storybook/react not hoisted

See original GitHub issue

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:

Initialize storybook react under a yarn workspace x
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

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:15 (3 by maintainers)

Top GitHub Comments

3reactions

raroulcommented, Mar 20, 2020

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/**"
    ]
  }
}

2reactions

shilmancommented, Mar 21, 2020

@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.