Originally I encountered the error while trying to render components from @ionic/react in Storybook, but I was able to narrow it down to ionicons and so I post the issue in this repo.

TLDR;

If you try to import anything from @ionic/react in a Storybook story, you get this error:

Here is a minimal example: https://github.com/anatoliyarkhipov/ionic-react-in-storybook

Details

Object(...) is not a function seems a little bit obscure, but it actually this line in the bundle:

Object(ionicons__WEBPACK_IMPORTED_MODULE_0__["addIcons"])(ionicons_icons__WEBPACK_IMPORTED_MODULE_1__["ICON_PATHS"]);

And this is the original line in the @ionic/react sources:

addIcons(ICON_PATHS);

Webpack wraps every direct call of an imported symbol with Object() and there is nothing wrong with it. The problem is that ionicons__WEBPACK_IMPORTED_MODULE_0__["addIcons"] is undefined and so Object(undefined) returns an empty object which is "not a function".

And that problem appears only for the addIcons - other symbols are imported correctly and aren't undefined:

I also tried to remove everything from from .storybook/config.js, import the function directly and console.log it, and it again was undefined:

// .storybook/config.js
import { addIcons } from "ionicons"
console.log(addIcons)

Then I rewrote the import to const ionicons = require("ionicons") and run config.js directly via node config.js and ionicons was an empty object.

// .storybook/config.js
const ionicons = require("ionicons")
console.log(ionicons)

At the same time, I have no problems when I use it in create-reactp-app! I set up the project following guide in this announcement and everything is fine: if I import { addIcons } from "ionicons" it's a normal function. I tried to figure out what's so special in the CRA's Webpack config, but had no success due to its complexity.

And here we are 😀.