react-popper component hook is returning "TypeError: Object(...) is not a function"

Question

I'm just trying to get a working version of the example in react-popper's documentation This is what I am using almost verbatim. only major difference is I need to be able to supply a component of any type as a prop to replace the button that opens the popover

import { usePopper } from 'react-popper';

const Example = () => {
  const [referenceElement, setReferenceElement] = useState(null);
  const [popperElement, setPopperElement] = useState(null);
  const [arrowElement, setArrowElement] = useState(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    modifiers: [{ name: 'arrow', options: { element: arrowElement } }],
  });

  return (
    <>
      <button type="button" ref={setReferenceElement}>
        Reference element
      </button>

      <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
        Popper element
        <div ref={setArrowElement} style={styles.arrow} />
      </div>
    </>
  );
};

Using this component in storybook fails with "TypeError: Object(...) is not a function" and very little other information

Answer 1

Storybook uses an ancient version of react-popper via react-popper-tooltip. You can fix it by aliasing react-popper-2 to the latest react-popper.

package.json:

{
  "dependencies": {
    "react-popper": "^2.2.5",
    "react-popper-2": "npm:react-popper@^2.2.5",
  }
}

Reference: https://github.com/storybookjs/storybook/issues/10982#issuecomment-642518186