Object(...) is not a function TypeError on React 15 and SB4

[pnarielwala-tc]

Hello! 👋

I'm having an issue upgrading storybook to SB4/SB5 with [email protected] and CRA2 ([email protected]). The webpack builds perfectly fine (not so much with SB5), but I get a blank page and an error in the console:

Dependencies
[email protected]
[email protected]
[email protected]

To Reproduce
Steps to reproduce the behavior:

1. Install SB packages from image above
2. run yarn start-storybook

// .storybook/webpack.config.js
const path = require('path')

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.resolve.modules = [
    ...storybookBaseConfig.resolve.modules,
    path.resolve(__dirname, '../src'),
  ]

  storybookBaseConfig.module.rules.push({
    test: /\.(woff|woff2|eot|ttf|svg|gif|png)$/,
    use: 'url-loader',
  })

  storybookBaseConfig.module.rules.push({
    test: /\.svg$/,
    loader: require.resolve('file-loader'),
    query: {
      name: 'static/media/[name].[hash:8].[ext]',
    },
  })

  storybookBaseConfig.module.rules.push({
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
    loader: require.resolve('url-loader'),
    options: {
      limit: 10000,
      name: 'static/media/[name].[hash:8].[ext]',
    },
  })

  return storybookBaseConfig
}

// .storybook/config.js
import { configure } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { setOptions } from '@storybook/addon-options'

// Option defaults:
setOptions({
  /**
   * name to display in the top left corner
   * @type {String}
   */
  name: 'Customer App Storybook',
  /**
   * URL for name in top left corner to link to
   * @type {String}
   */
  url: '#',
  /**
   * show story component as full screen
   * @type {Boolean}
   */
  goFullScreen: false,
  /**
   * display panel that shows a list of stories
   * @type {Boolean}
   */
  showStoriesPanel: true,
  /**
   * display panel that shows addon configurations
   * @type {Boolean}
   */
  showAddonPanel: true,
  /**
   * display floating search box to search through stories
   * @type {Boolean}
   */
  showSearchBox: false,
  /**
   * show addon panel as a vertical panel on the right
   * @type {Boolean}
   */
  addonPanelInRight: true,
  /**
   * sorts stories
   * @type {Boolean}
   */
  sortStoriesByKind: false,
  /**
   * regex for finding the hierarchy separator
   * @example:
   *   null - turn off hierarchy
   *   /\// - split by `/`
   *   /\./ - split by `.`
   *   /\/|\./ - split by `/` or `.`
   * @type {Regex}
   */
  hierarchySeparator: null,
  /**
   * regex for finding the hierarchy root separator
   * @example:
   *   null - turn off mulitple hierarchy roots
   *   /\|/ - split by `|`
   * @type {Regex}
   */
  hierarchyRootSeparator: null,
  /**
   * sidebar tree animations
   * @type {Boolean}
   */
  sidebarAnimations: true,
  /**
   * id to select an addon panel
   * @type {String}
   */
  selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
})

function loadStories() {
  // automatically import all files ending in *.stories.js
  const req = require.context('../src', true, /.stories.js$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: chrome
• Framework: react
• Addons: actions, info, knobs, links, options
• Version: 4.1.12

Additional context
Build error I get when building SB5 instead of SB4

[pnarielwala-tc]

Works in 4.1.18 apparently, going to close!