Storybook: Can not import react-popper, usePopper got undefined

[shincurry]

Describe the bug

my project need to import react-popper and @popperjs/core to use it.

In old version 6.0.0-alpha.30, it works. usePopper is a hooks function.
But when I upgrade storybook packages to 6.0.0-beta.17. usePopper becomes to undefined.

import { usePopper } from 'react-popper';
console.log(usePopper) // undefined

some research

I tried to find the problem, in the process I noticed that some addon packages of storybook 6.0.0.beta, such as @storybook/addon-docs or @storybook/addon-a11y, depend on the react-popper-tooltip package, and react-popper-tooltip depend on popper.js@^1.14.7.

Maybe the storybook did not load the correct version of react-popper?
[email protected] does not have usePopper hooks function before 2.0.0.

So i removed all addons configuration in .storybook/main.js, and it worked (imported usePopper was not undefined).

by the way, i have great confidence that this is not a bug with react-popper itself.

I don’t know if this problem is a personal case, I need some help or hints.

Code snippets

package.json

{
  "dependencies": {
    "@popperjs/core": "^2.2.2",
    "react-popper": "^2.2.1",
  }
}

System:

npx -p @storybook/cli@next sb info

Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i3-8100B CPU @ 3.60GHz
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.22.4 - ~/dev/uui/node_modules/.bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 76.0.1
    Safari: 13.1
  npmPackages:
    @storybook/addon-a11y: ^5.3.19 => 5.3.19
    @storybook/addon-actions: ^6.0.0-beta.17 => 6.0.0-beta.17
    @storybook/addon-docs: ^6.0.0-beta.17 => 6.0.0-beta.17
    @storybook/addon-knobs: ^6.0.0-beta.17 => 6.0.0-beta.17
    @storybook/addon-links: ^6.0.0-beta.17 => 6.0.0-beta.17
    @storybook/addon-storysource: ^6.0.0-beta.17 => 6.0.0-beta.17
    @storybook/addons: ^6.0.0-beta.17 => 6.0.0-beta.17
    @storybook/react: ^6.0.0-beta.17 => 6.0.0-beta.17

Additional context

repo: https://github.com/HackPlan/UUI/tree/213b74ef90354459ac97ffcf8e83e7f3d180c982

WARNING in ./src/components/Popover/Popover.tsx 102:11-20
"export 'usePopper' was not found in 'react-popper'
 @ ./src/components/Popover/index.ts
 @ ./src/index.ts
 @ ./stories/Toast.stories.tsx
 @ ./stories sync ^(?:(?:\.[\\/](?=.))?(?:(?!\.)(?:(?!(?:[\\/]|^)\.).)*?[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.(tsx|mdx)(?:[\\/]|$))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.46 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.11 KiB {HtmlWebpackPlugin_0} [built]

[druhill]

I'm experiencing the same issue here caused by an outdated dependency within react-popper-tooltip which is included with some addons.

As a short term workaround I have aliased react-popper v2:

package.json

{
  "dependencies": {
    "@popperjs/core": "^2.4.1",
    "react-popper-2": "npm:react-popper@^2.2.3"
  }
}

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

[reme3d2y]

I have the same issue. One of my components depends on usePopper, but storybook uses old version, without this hook, that cause the problem.

Pls, bump popper version 🙏

[reme3d2y]

in Alfabank, we really want to migrate to 6.x version, but this bug doesn't let us do it.

There's PR that's been closed for some reason.

@shilman, can you update react-popper-tooltip with one of the next releases? 🙏 🙄

[shilman]

@reme3d2y can you use the workaround described above? turns out it's not a trivial upgrade due to some IE11-related compatibility issues. we'll try to get it sorted out in 6.0.x.

[reme3d2y]

@shilman sorry for late reply. workaround works, but we have to change import from react-popper to react-popper-2 in source code of our components that we separately publish to the npm.

Hmm, what if you apply this workaround inside storybook sources instead of updating react-popper?

[gcofficial]

Unfortunately, I have the same issue. I just leave this comment here to be subscribed to this topic.

[dfernandez-asapp]

@shilman I don't know how the isolation between modules work in SB... but upgrading react-popper doesn't seems to be a good long term solution. If a project uses a different version of react-popper (newer or older) there are good chances that this will break. Is there any Webpack configuration to solve this? (the proposed workaround doesn't work for me either).

[duniul]

For those who don't want to use an alias for the package name in their source code, this workaround only touches dev dependencies and applies the change when the code is loaded by Storybook:

// .storybook/main.js

async function popperWorkaround(config) {
  config.module.rules = [
    {
      test: /\.js$/,
      loader: 'string-replace-loader',
      options: {
        search: "from 'react-popper'",
        replace: "from 'react-popper-storybook'",
      },
    },
    ...config.module.rules,
  ];

  return config;
}

module.exports = {
  webpackFinal: popperWorkaround,
};

// package.json

"devDependencies": {
  "string-replace-loader": "2.3.0",
  "react-popper-storybook": "npm:react-popper@^2.2.3",
}

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.1 containing PR #11827 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[nicolasletoublon]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.1 containing PR #11827 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

Thanks a lot mate!

[codeth]

@shilman We've come up against this issue.

It does initially appear to be fixed by 6.1.0-alpha.1 which gets rid of the export 'usePopper' was not found in 'react-popper' error and the target element renders. However, on mouseover of the target the popover fails to render and we get a new error which can be traced to @storybook/addon-docs:

TypeError: placement.split is not a function
    at getBasePlacement (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/@popperjs/core/lib/utils/getBasePlacement.js?:6:20)
...

Disabling @storybook/addon-docs in our main.js fixes the issue and popper then works as expected. When docs is the only enabled addon, popper breaks on mouseover of target element.

[shilman]

Storybook uses webpack DLLs and it's causing various version conflict issues. I suspect this is one of them @codeth

We're looking into getting rid of the DLLs in 6.1. I'm not sure about the workaround in the meantime. @ndelangen any ideas?

[handonam]

Have we found a workaround for this? I'm currently blocked myself with using popper and addon-docs, so I have to disable docs for our team until there's a fix.

[shilman]

@handonam Try running storybook with --no-dll

[offlineanton]

running it with --no-dll seems to resolve the issue, thanks!

[vitorhsb]

Also on version 6.0.26 running it with --no-dll seems to work!

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.28 containing PR #12874 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.27 containing PR #12874 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade