Can not import react-popper, usePopper got undefined #10982

shincurry · 2020-05-29T09:58:28Z

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]

The text was updated successfully, but these errors were encountered:

druhill · 2020-06-11T09:08:46Z

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 · 2020-07-03T03:18:51Z

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 · 2020-07-15T08:43:12Z

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 · 2020-08-06T10:09:16Z

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 · 2020-08-07T08:04:34Z

@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 · 2020-08-13T16:44:54Z

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

theguriev · 2020-08-21T06:43:32Z

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

dfernandez-asapp · 2020-08-24T12:51:34Z

@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 · 2020-08-26T08:48:31Z

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 · 2020-08-31T14:34:08Z

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 · 2020-09-03T06:58:45Z

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 · 2020-09-04T10:49:11Z

@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 · 2020-09-04T14:09:17Z

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 · 2020-09-30T16:57:55Z

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 · 2020-09-30T21:07:27Z

@handonam Try running storybook with --no-dll

offlineanton · 2020-10-05T14:14:40Z

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

vitorhsb · 2020-10-10T10:11:51Z

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

shilman · 2020-10-23T07:39:15Z

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 · 2020-10-23T10:29:25Z

¡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

shilman added dependencies question / support ui components labels Jun 1, 2020

skvale mentioned this issue Jun 19, 2020

feat: Upgrade to popper-2 SAP/fundamental-react#1100

Merged

stale bot added the inactive label Jul 3, 2020

stale bot removed the inactive label Jul 15, 2020

shilman added tracked has workaround labels Aug 7, 2020

shilman mentioned this issue Aug 7, 2020

Upgrade react-popper-tooltip to 3.1.0 #11827

Merged

3 tasks

robertlong mentioned this issue Aug 22, 2020

Room UI Redesign: Popover Hubs-Foundation/hubs#2910

Merged

shilman closed this as completed Aug 31, 2020

shilman reopened this Sep 4, 2020

shilman added the P3 label Sep 25, 2020

shilman mentioned this issue Oct 23, 2020

Core: Disable Docs DLL by default #12874

Merged

shilman closed this as completed Oct 23, 2020

guilean mentioned this issue Oct 26, 2020

Styled Tooltip cmpsr/composer#169

Merged

3 tasks

This was referenced Jan 29, 2022

Docs tab is not working in Storybook with Vite.js #17366

Closed

Docs tab is not working in Storybook with Vite.js storybookjs/builder-vite#220

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can not import react-popper, usePopper got undefined #10982

Can not import react-popper, usePopper got undefined #10982

shincurry commented May 29, 2020

druhill commented Jun 11, 2020

stale bot commented Jul 3, 2020

reme3d2y commented Jul 15, 2020

reme3d2y commented Aug 6, 2020

shilman commented Aug 7, 2020 •

edited

Loading

reme3d2y commented Aug 13, 2020 •

edited

Loading

theguriev commented Aug 21, 2020

dfernandez-asapp commented Aug 24, 2020

duniul commented Aug 26, 2020 •

edited

Loading

shilman commented Aug 31, 2020

nicolasletoublon commented Sep 3, 2020

codeth commented Sep 4, 2020 •

edited

Loading

shilman commented Sep 4, 2020

handonam commented Sep 30, 2020

shilman commented Sep 30, 2020 •

edited

Loading

offlineanton commented Oct 5, 2020

vitorhsb commented Oct 10, 2020

shilman commented Oct 23, 2020

shilman commented Oct 23, 2020

Can not import react-popper, usePopper got undefined #10982

Can not import react-popper, usePopper got undefined #10982

Comments

shincurry commented May 29, 2020

druhill commented Jun 11, 2020

stale bot commented Jul 3, 2020

reme3d2y commented Jul 15, 2020

reme3d2y commented Aug 6, 2020

shilman commented Aug 7, 2020 • edited Loading

reme3d2y commented Aug 13, 2020 • edited Loading

theguriev commented Aug 21, 2020

dfernandez-asapp commented Aug 24, 2020

duniul commented Aug 26, 2020 • edited Loading

shilman commented Aug 31, 2020

nicolasletoublon commented Sep 3, 2020

codeth commented Sep 4, 2020 • edited Loading

shilman commented Sep 4, 2020

handonam commented Sep 30, 2020

shilman commented Sep 30, 2020 • edited Loading

offlineanton commented Oct 5, 2020

vitorhsb commented Oct 10, 2020

shilman commented Oct 23, 2020

shilman commented Oct 23, 2020

shilman commented Aug 7, 2020 •

edited

Loading

reme3d2y commented Aug 13, 2020 •

edited

Loading

duniul commented Aug 26, 2020 •

edited

Loading

codeth commented Sep 4, 2020 •

edited

Loading

shilman commented Sep 30, 2020 •

edited

Loading