Object is not a function

Describe the bug

Opening up Storybook which has addon-docs enabled as an addon will result in an infinitely loading page and the following error in the console:

core.browser.esm.js:10 Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:10)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:150)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:150)
    at Module../node_modules/@emotion/styled/dist/styled.browser.esm.js (styled.browser.esm.js:1)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/theming/dist/index.js (index.js:39)

Expected behavior Not to throw an error

Screenshots Screenshot with infinite loading and console error.

System: Environment Info:

System: OS: macOS 10.15.3 CPU: (12) x64 Intel® Core™ i9-8950HK CPU @ 2.90GHz Binaries: Node: 10.16.3 - /usr/local/bin/node npm: 6.13.0 - /usr/local/bin/npm Browsers: Chrome: 84.0.4147.45 Safari: 13.0.5 npmPackages: @storybook/addon-docs: ^5.3.19 => 5.3.19 @storybook/addon-storysource: ^5.3.19 => 5.3.19 @storybook/preact: ^5.3.19 => 5.3.19 @storybook/preset-scss: ^1.0.2 => 1.0.2

Additional context main.js file

module.exports = {
    stories: ['../**/*.stories.[tj]sx'],
    addons: [
        '@storybook/addon-docs',
        '@storybook/addon-storysource',
        '@storybook/preset-scss'
    ]
};

It works just fine without addon-docs. It doens’t matter the order that I put the addons in, the error will still occur.

[vanpana]

Just to check that preact/compat is working, I changed the Button component on your branch to

import { h } from 'preact';
import Preact from 'preact/compat';

/**
 * The button component will render a clickable button
 */
export default class Button extends Preact.Component {
  render() {
    const TagName = this.props.href ? 'a' : 'button';

    return (
      <TagName class="button" href={this.props.href} {...this.props}>
      {this.props.children}
    </TagName>
    )
  }
}

And it is indeed working. That probably means, somehow, my code is faulty.

If I find any clue, I’ll update this issue in case others have this problem.

[shilman]

@vanpana might be an issue with preact/compat? i’ve added a working example of addon-docs to our sample project here: https://github.com/storybookjs/storybook/pull/11145