ModuleNotFoundError @storybook/addon-docs NPM 7

[josias-r]

Describe the bug
Can't resolve '@storybook/addon-docs/blocks' in '/Users/me/myproject/path/to/stories'.
I can't import addon-docs from my stories, after I upgraded to storybook 6.2.1 (from 6.1.17). I have addon-essentials installed.

I suspect this has something to do with incompatibility issues with NPM 7 workspaces. I get this error in a subpackage from a worspace set-up.

A workaround is to install addon-docs explicitly instead of just addon-essentials. But afaik that's should not be the case, since not even sb init installs it explicitly.

To Reproduce
Install Storybook version 6.2.1 inside a subpackage of an NPM 7 workspaces and try importing something from addon-docs inside an MDX story.

Screenshots

Code snippets
If applicable, add code samples to help explain your problem.

System

Environment Info:

  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 15.8.0 - ~/.nvm/versions/node/v15.8.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.4/bin/yarn
    npm: 7.6.3 - ~/.nvm/versions/node/v15.8.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Edge: 89.0.774.63
    Firefox: 86.0
    Safari: 14.0.3

[joycemwang]

having this same problem

[hello-astar]

have you solved the problem ?

[shilman]

Please add @storybook/addon-docs as a project dependency

[Develliot]

I was getting this error and I realised that @storybook/addon-docs wasn't in package.json, I think it might have been part of addon-essentials and isn't anymore or something like that, very odd.

[shilman]

The issue is that NPM7 has changed the semantics of how dependencies work compared to previous versions of NPM.

NPM6:

[your package] -> addon-essentials -> addon-docs = Referencing `addon-docs` in your package is OK

NPM7:

[your package] -> addon-essentials -> addon-docs = Referencing `addon-docs` in your package may fail
[your package] -> addon-essentials + addon-docs = Referencing `addon-docs` in your package is OK

[funyapu]

Let me share my case. Might be other factor made this situation since I kinda have complicated repo.

NPM8 (+ npm workspace + npm-force-resolutions):

[your package] -> addon-essentials + addon-docs = No addon-docs installed
[your package] -> addon-essentials  -> addon-docs = OK

  npm: '8.1.1',
  node: '14.18.1',
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/addon-storyshots": "^6.3.12",
    "@storybook/theming": "^6.3.12",
    "@storybook/vue": "^6.3.12",

  "resolutions": {
    "yargs-parser": "^20.2.2",
    "set-value": "^4.0.1",
    "ansi-regex": "^5.0.1",
    "ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
  },

[ghost]

@shilman Is there a proposed solution for NPM 8? I've pulled all storybook dependencies into a separate NPM project and listed @storybook/addon-docs as a dependencies:

    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/builder-webpack5": "^6.3.12",
    "@storybook/cli": "^6.3.6",
    "@storybook/components": "^6.3.0",
    "@storybook/core-events": "^6.3.0",
    "@storybook/manager-webpack5": "^6.3.12",
    "@storybook/react": "^6.3.6",
    "@storybook/theming": "^6.3.0",

However, NPM 8 installs this in the packages node_modules. i.e. <project_root>/node_modules/@my_package/node_modules/@storybook/addon-docs and Webpack can't find it.

On the other hand, if I install @storybook/addon-docs in my project root, it resolves and Webpack builds correctly.

[shilman]

@josh-biddick we'll need to address the package structure in a future release. any suggestions? we're still trying to catch up with NPM7 -- haven't even looked at NPM8 yet

[ghost]

@shilman I'm not sure I have enough knowledge about the Node resolution strategy to comment but to reproduce I would potentially try to emulate a scenario where you have a separate package containing the Storybook dependencies and install that package as a dependency in your root project. Later, attempt to run start-storybook and you may start to see errors.

As for solving the issue, maybe the Node resolution strategy has changed significantly and there maybe someone here who has a deeper understanding as to why this problem occurs?

We have other projects that use other packages to provide common dependencies, so I'm actually less inclined to think it has to do with NPM and more to do with Webpack (https://webpack.js.org/concepts/module-resolution/)

[lwpulsifer]

@shilman Is there a proposed solution for NPM 8? I've pulled all storybook dependencies into a separate NPM project and listed @storybook/addon-docs as a dependencies:

    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/builder-webpack5": "^6.3.12",
    "@storybook/cli": "^6.3.6",
    "@storybook/components": "^6.3.0",
    "@storybook/core-events": "^6.3.0",
    "@storybook/manager-webpack5": "^6.3.12",
    "@storybook/react": "^6.3.6",
    "@storybook/theming": "^6.3.0",

However, NPM 8 installs this in the packages node_modules. i.e. <project_root>/node_modules/@my_package/node_modules/@storybook/addon-docs and Webpack can't find it.

On the other hand, if I install @storybook/addon-docs in my project root, it resolves and Webpack builds correctly.

@josh-biddick did you end up uncovering any potential solutions to this other than the workaround you mentioned here? I'm running into exactly the same issue in a project of mine.

[ghost]

@josh-biddick did you end up uncovering any potential solutions to this other than the workaround you mentioned here? I'm running into exactly the same issue in a project of mine.

@lwpulsifer No nothing yet.

[zenschematic]

@shilman Is there a proposed solution for NPM 8? I've pulled all storybook dependencies into a separate NPM project and listed @storybook/addon-docs as a dependencies:

    "@storybook/addon-actions": "^6.3.6",
    "@storybook/addon-docs": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.6",
    "@storybook/addon-links": "^6.3.6",
    "@storybook/builder-webpack5": "^6.3.12",
    "@storybook/cli": "^6.3.6",
    "@storybook/components": "^6.3.0",
    "@storybook/core-events": "^6.3.0",
    "@storybook/manager-webpack5": "^6.3.12",
    "@storybook/react": "^6.3.6",
    "@storybook/theming": "^6.3.0",

However, NPM 8 installs this in the packages node_modules. i.e. <project_root>/node_modules/@my_package/node_modules/@storybook/addon-docs and Webpack can't find it.

On the other hand, if I install @storybook/addon-docs in my project root, it resolves and Webpack builds correctly.

Was running into the same exact problem, this did the trick. Weird workaround though.

[cauediademi]

I fixed this exact same error by removing the following lines from storybook/addons.js:
import '@storybook/addon-actions/manager';
import '@storybook/addon-knobs/manager';
import '@storybook/addon-links/manager';

[gaurav5430]

The issue is that NPM7 has changed the semantics of how dependencies work compared to previous versions of NPM.

NPM6:

[your package] -> addon-essentials -> addon-docs = Referencing `addon-docs` in your package is OK

NPM7:

[your package] -> addon-essentials -> addon-docs = Referencing `addon-docs` in your package may fail
[your package] -> addon-essentials + addon-docs = Referencing `addon-docs` in your package is OK

Is this mentioned somewhere in npm 7 release notes somewhere, would want to understand this a little better
@shilman

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).