Storybook: Storybook resolving wrong dependency version when depended on by both storybook internally and the user's project

[RobertWHurst]

Describe the bug
I have a react component for which I have created a story for documentation purposes. It depends on the usePopper hook from [email protected]. When I render the component using my own webpack server (outside of storybook) it works as expected.

However when I start storybook I get an error stating that usePopper does not exist. After digging around in my node modules I discovered that two of the storybook addons I'm using also depend on react-popper, but a previous version - 1.3.7 via [email protected]. This version doesn't export a usePopper hook on which my component depends. To be sure I manually vandalized the source of [email protected] in my node_modules. If it had loaded this version as expected a custom error message would have been thrown, instead I get storybook's copy.

I'd like to note that I've been able to reproduce this behavior repeatedly even after deleting the node_modules folder and installing all dependencies from scratch.

After logging the exported value of the react-popper module in my story, I've confirmed that instead of receiving version @2.2.3 of react-popper I'm instead getting the version that ships with the storybook add ons.

npm ls react-popper

+-- @storybook/[email protected]
| `-- @storybook/[email protected]
|   `-- [email protected]
|     `-- [email protected]
+-- @storybook/[email protected]
| `-- @storybook/[email protected]
|   `-- [email protected]
|     `-- [email protected]
+-- [email protected]

To Reproduce
Steps to reproduce the behavior:

1. Create a component that depends on the usePopper hook from [email protected] (make sure to add it as a dependency in your package.json).
2. Create a story for the component and log the exported value of react-popper.
3. Run storybook.
4. An error occurs, and you'll see the older version of react-popper.

Expected behavior
The the version of react-popper resolved from the root of my project should be the one imported in the component and story.

System:
Note that this isn't windows specific as it also happens on my mac.

Environment Info:
System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Binaries:
Node: 13.12.0 - ~\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
Yarn: 1.22.1 - ~\scoop\apps\yarn\current\Yarn\bin\yarn.CMD
npm: 6.14.4 - ~\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
@storybook/addon-a11y: ^5.3.19 => 5.3.19
@storybook/addon-actions: ^6.0.0-beta.31 => 6.0.0-beta.31
@storybook/addon-docs: ^6.0.0-beta.31 => 6.0.0-beta.31
@storybook/addon-knobs: ^6.0.0-beta.31 => 6.0.0-beta.31
@storybook/addon-links: ^6.0.0-beta.31 => 6.0.0-beta.31
@storybook/addon-viewport: ^6.0.0-beta.31 => 6.0.0-beta.31
@storybook/addons: ^6.0.0-beta.31 => 6.0.0-beta.31
@storybook/client-api: ^6.0.0-beta.31 => 6.0.0-beta.31
@storybook/preset-create-react-app: ^3.1.1 => 3.1.1
@storybook/react: ^6.0.0-beta.31 => 6.0.0-beta.31
@storybook/theming: ^6.0.0-beta.31 => 6.0.0-beta.31

[RobertWHurst]

@shamin This is more of a bug than a question isn't it? It indicates module resolution is broken (resolving from the wrong path) for preview.

[shilman]

@RobertWHurst Half the "bugs" that get filed are actually user configuration issues, so I mark everything as a question until somebody has a chance to look at 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!

[tim-evans]

I've encountered this issue in our application while trying to use the storybook 6.0.0 RC— the error I was getting was:

export 'usePopper' was not found in 'react-popper'

I'm providing this info just to raise this as something that may be helpful to be fixed before releasing 6.0! ✨

The version 3.1.0 of react-popper-tooltip should fix this, but it'd also result in a conflict with older versions of react-popper in apps 😭

[elhaouari-mohammed]

getting the same error on v6.0.4

export 'usePopper' was not found in 'react-popper'

reverted back to v5.3.19 to solve the problem.

[ndelangen]

I'm looking at https://github.com/storybookjs/storybook/pull/11827 within the next few days

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

[vtaits]

Workaround is start storybook with --no-dll option.

Trouble in DllReferencePlugin configuration. Versions of react-popper and other packages are fixed in this file node_modules/@storybook/core/dll/storybook_docs-manifest.json.

[shilman]

DLLs have been removed in 6.1 so this shouldn't be a problem anymore. closing!