Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
pnarielwala-tc opened this issue Apr 24, 2019 · 1 comment
Closed

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

pnarielwala-tc opened this issue Apr 24, 2019 · 1 comment
Labels
configuration babel / webpack cra Prioritize create-react-app compatibility react

Comments

@pnarielwala-tc
Copy link

Hello! 👋

I'm having an issue upgrading storybook to SB4/SB5 with react@15.6.2 and CRA2 (react-scripts@2.1.8). The webpack builds perfectly fine (not so much with SB5), but I get a blank page and an error in the console:

Screen Shot 2019-04-23 at 5 17 11 PM

Dependencies
react@15.6.2
react-dom@15.6.2
react-scripts@2.1.8

Screen Shot 2019-04-23 at 5 16 54 PM

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

Screen Shot 2019-04-24 at 10 24 32 AM

@pnarielwala-tc
Copy link
Author

Works in 4.1.18 apparently, going to close!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
configuration babel / webpack cra Prioritize create-react-app compatibility react
Projects
None yet
Development

No branches or pull requests

2 participants