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

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

1. Open the above site and wait till the page loads.
2. 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 (<anonymous>) 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/core@2.4.4
└─ react-popper@2.2.3

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
  }
]

[papaiatis]

@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 "popper.js@1.16.1"
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]

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?