Popper-core: Popper is broken in Storybook 6: bound is undefined, TypeError: Cannot read property 'top' of undefined

Created on 29 Aug 2020 · 11Comments · Source: popperjs/popper-core

CodeSandbox demo

There's no easy way for me to reproduce this in codesandbox as it seems it only occurs in my newer Storybook 6 installation.

Steps to reproduce the problem

Open the above site and wait till the page loads.
Click on the blue button when the page loads.

What is the expected behavior?

A popper should show.

What went wrong?

If you open the console, the following displays:

Uncaught (in promise) TypeError: Cannot read property 'top' of undefined
at hide (popper.js:1960)
at eval (popper.js:907)
at Array.forEach ()
at runModifiers (popper.js:893)
at Popper.update (popper.js:948)
at Popper.update$$1 (popper.js:2549)
at eval (popper.js:50)

Any other comments?

Results of yarn list for the below packages:

└─ @popperjs/[email protected]
└─ [email protected]

I'm not sure if it's because of any dependencies storybook defines, or the iframe setup, but it seems it should still work regardless.

Also the reason this all fails is because there's a method that finds the first preventOverflow object in this list of data.instance.modifiers and it doesn't have a modifiers key / value pair.

[
  {
    "name": "offset",
    "enabled": true,
    "options": {
      "offset": [
        0,
        4
      ]
    }
  },
  {
    "name": "preventOverflow",
    "options": {
      "boundary": "viewport"
    }
  },
  {
    "name": "computeStyles",
    "options": {
      "gpuAcceleration": false
    }
  },
  {
    "name": "shift",
    "order": 100,
    "enabled": true
  },
  {
    "name": "offset",
    "order": 200,
    "enabled": true,
    "offset": 0
  },
  {
    "name": "preventOverflow",
    "order": 300,
    "enabled": true,
    "priority": [
      "left",
      "right",
      "top",
      "bottom"
    ],
    "padding": 5,
    "boundariesElement": "scrollParent",
    "boundaries": {
      "top": 5,
      "left": 5,
      "bottom": 109,
      "right": 1375
    }
  },
  {
    "name": "keepTogether",
    "order": 400,
    "enabled": true
  },
  {
    "name": "arrow",
    "order": 500,
    "enabled": false,
    "element": null
  },
  {
    "name": "flip",
    "order": 600,
    "enabled": true,
    "behavior": "flip",
    "padding": 5,
    "boundariesElement": "viewport",
    "flipVariations": false,
    "flipVariationsByContent": false
  },
  {
    "name": "inner",
    "order": 700,
    "enabled": false
  },
  {
    "name": "hide",
    "order": 800,
    "enabled": true
  },
  {
    "name": "computeStyle",
    "order": 850,
    "enabled": true,
    "gpuAcceleration": true,
    "x": "bottom",
    "y": "right"
  },
  {
    "name": "applyStyle",
    "order": 900,
    "enabled": false
  },
  {
    "name": "updateStateModifier",
    "enabled": true,
    "order": 900
  }
]

# BUG 🐞 triage

Source

rey-wright

All 11 comments

I use Popper in Storybook 6 successfully, it must be something about your setup. Please attach a repro repo

FezVrasta on 29 Aug 2020

@FezVrasta https://github.com/reywright/popper-issue

I can create a new ticket, reformulate the top portion of the current ticket, or maybe my comment here is sufficient enough.

Pull down repo and cd into it.
yarn && yarn storybook
Select the Popover story.
Click the button (console should render an error)
Remove modifiers in source Popover file and then click button again, should work now.

reywright on 31 Aug 2020

@rey-wright there are Popper 1-shaped modifiers mixed with Popper 2 ones here (e.g. order property). Try removing them.

atomiks on 31 Aug 2020

@atomiks thanks for the reply.

https://github.com/reywright/popper-issue/blob/master/src/Popover/index.jsx

I added a simplified repo / example that just has a single modifier, which still breaks.

reywright on 31 Aug 2020

@rey-wright
I have the very same problem and I noticed that the mentioned error message actually comes from popper.js (v1.x)! And not from @popperjs/core (v2.x) which I thought I am using.
Turns out the old popper library is installed by:

yarn why popper.js
yarn why v1.19.1
[1/4] 🤔  Why do we have the module "popper.js"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#@storybook#addon-actions#@storybook#components" depends on it
   - Hoisted from "_project_#@storybook#addon-actions#@storybook#components#popper.js"
   - Hoisted from "_project_#@storybook#addon-actions#@storybook#components#react-popper-tooltip#react-popper#popper.js"
info Disk size without dependencies: "1.91MB"
info Disk size with unique dependencies: "1.91MB"
info Disk size with transitive dependencies: "1.91MB"
info Number of shared dependencies: 0
✨  Done in 1.94s.

Note that I also have Storybook v6.0.21 installed.

What's happening here? The thing is, @storybook/components uses an old version of react-popper-tooltip which in turn still uses an old version of react-popper which, you can guess, uses the old popper.js library.
The currently latest version of Storybook is v6.0.21 but if you look at @next or v6.1.x you can see they already have the new popper library!

So go ahead and install the latest and greatest of Storybook v6.1.0-alpha.1 (as of now).

papaiatis on 3 Sep 2020

👀1 👍1

I have a question though to @FezVrasta: so apparently I had both @popperjs/core and popper.js installed and looks like popper.js took the control over even though my components were using/referencing the new v2 library. How come is that?
How could I work around this problem if I don't upgrade to a yet unstable version of Storybook?

papaiatis on 3 Sep 2020

👍1

yeah my big issue (which may be more of a yarn / npm issue) is that it's easy to upgrade storybook but this presents an issue whereby if any other package is using popper, and a different version of it, then things break... which isn't really reliable as people upgrade packages at different times.

Thanks for the context here @papaiatis !!! I'll go ahead and just upgrade storybook for now.

reywright on 3 Sep 2020

Sorry I didn't have time to look at this issue yet, but I confirm I'm using the stable Storybook version with Popper 2.x without an issue. So upgrading Storybook doesn't seem to be needed.

FezVrasta on 3 Sep 2020

No worries, no rush @FezVrasta however I will say: my attached repo I built using create-react-app along with installing storybook with no additional changes, and that error is present in that repo.

Also @papaiatis I just updated to the alpha and I can confirm that fixes the issue.

reywright on 3 Sep 2020

Seems similar to this Storybook issue: https://github.com/storybookjs/storybook/issues/11246. quoting a workaround from there

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.