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

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 react-popper@2.2.3. 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 react-popper-tooltip@2.11.1. This version doesn’t export a usePopper hook on which my component depends. To be sure I manually vandalized the source of react-popper@2.2.3 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/addon-actions@6.0.0-beta.31
| `-- @storybook/components@6.0.0-beta.31
|   `-- react-popper-tooltip@2.11.1
|     `-- react-popper@1.3.7
+-- @storybook/addon-docs@6.0.0-beta.31
| `-- @storybook/components@6.0.0-beta.31
|   `-- react-popper-tooltip@2.11.1
|     `-- react-popper@1.3.7
+-- react-popper@2.2.3

To Reproduce Steps to reproduce the behavior:

1. Create a component that depends on the usePopper hook from react-popper@2.2.3 (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® Core™ 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

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

[shilman]

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