Storybook: Freezes upon starting with "webpack built 4f2763299ad82ff003bf in 8785ms"

Created on 19 Dec 2018 · 5Comments · Source: storybookjs/storybook

Describe the bug
I invoke npm run storybook and it freezes at at "webpack built 4f2763299ad82ff003bf in 8785ms". I installed it on a gatsby v2 stack.

Expected behavior
It should proceed.

Screenshots

Code snippets
.storybook/webpack.config.js:

const path = require('path')

module.exports = (baseConfig, env, defaultConfig) => {
  // Transpile Gatsby module because Gastby includes un-transpiled ES6 code.
  defaultConfig.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
  defaultConfig.module.rules[0].use[0].loader = require.resolve('babel-loader')

  // The next two lines should always reflect the config in jest-preprocess.js until there is a way for Gatsby to expose an internal webpack.config
  // use @babel/preset-react for JSX and env (instead of staged presets)
  defaultConfig.module.rules[0].use[0].options.presets = [
    require.resolve('babel-preset-gatsby'),
  ]

  // use @babel/plugin-proposal-class-properties for class arrow functions
  defaultConfig.module.rules[0].use[0].options.plugins = []

  defaultConfig.resolve.modules.push(
    'node_modules',
    path.resolve(__dirname, '../src') // Allows for direct imports for paths like components/Button, etc.
  )

  return defaultConfig
}

.storybook/config.js

import { addDecorator, configure } from '@storybook/react'
import { themes } from '@storybook/components'
import { setOptions } from '@storybook/addon-options'
import infoAddon, { withInfo } from '@storybook/addon-info'
import { withNotes } from '@storybook/addon-notes'
import { createGenerateClassName } from '@material-ui/core/styles'
import { withOptions } from '@storybook/addon-options'
import { muiTheme } from 'storybook-addon-material-ui'
import { withBackgrounds } from '@storybook/addon-backgrounds'
import theme from 'config/theme'

/*
  Gatsby setup for storybook: https://www.gatsbyjs.org/docs/visual-testing-with-storybook/
  Here is a visual list of real examples of current companies in production that are using storybook with:
    https://storybook.js.org/examples/
*/

// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
  enqueue: () => {},
  hovering: () => {},
}

// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = ''

// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = (pathname) => {
  action('NavigateTo:')(pathname)
}

/*
  All of these addDecorator methods in this file are defined globally.
    https://github.com/storybooks/storybook/tree/master/addons/info#setting-global-options
  We are able to overwrite these decorators inside individual stories as well, so there is tons of flexibility.
*/

addDecorator(
  withInfo({
    inline: false, // If true, it will render stories in between the headers/proptypes metas. false is to keep them in a separate page (the "Show info" button on the top right of each story)
    header: true, // Renders story headers/descriptions in each story
    source: true, // Renders meta data like prop types, etc
  })
)

// Add notes to each story
addDecorator(withNotes)

// Some custom options for the overall stores pages
addDecorator(
  withOptions({
    theme: themes.light,
    name: *censored*,
    url: '*censored*',
    goFullScreen: false,
    showLeftPanel: true,
    showDownPanel: true,
    showSearchBox: false,
    downPanelInRight: false,
  })
)

// Needed for Material-UI to be integrated
addDecorator(muiTheme(theme))

// Write notes under each story
addDecorator(withNotes)

// Will render a default background color for each story, as well as give additional options to change in-between.
addDecorator(
  withBackgrounds([
    { name: 'white', value: '#fff', default: true },
    { name: 'black', value: '#000' },
    { name: 'primary', value: theme.palette.primary.main },
    { name: 'secondary', value: theme.palette.secondary.main },
    { name: 'thirdary', value: theme.palette.thirdary.main },
  ])
)

// Grabs every file in the src/stories directory with file names ending in:   .stories.js
const req = require.context('../src/stories', true, /.stories.js$/)

function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module)

.storybook/addons.js

import '@storybook/addon-actions/register' // https://github.com/storybooks/storybook/tree/master/addons/actions
import '@storybook/addon-links/register' // https://github.com/storybooks/storybook/tree/master/addons/links
import '@storybook/addon-notes/register' // https://github.com/storybooks/storybook/tree/master/addons/notes
import '@storybook/addon-options/register' // https://github.com/storybooks/storybook/tree/master/addons/options
import '@storybook/addon-backgrounds/register' // https://github.com/storybooks/storybook/tree/master/addons/backgrounds
import 'storybook-addon-material-ui/register' // https://www.npmjs.com/package/storybook-addon-material-ui

.babelrc

{
  "plugins": [],
  "presets": ["babel-preset-gatsby"]
}

package.json

{
  "name": "*censored*",
  "description": "*censored*",
  "version": "1.0.0",
  "author": "*censored*",
  "dependencies": {
    "@material-ui/core": "^3.7.0",
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "dotenv": "^6.2.0",
    "gatsby": "^2.0.53",
    "gatsby-image": "^2.0.20",
    "gatsby-paginate": "^1.0.16",
    "gatsby-plugin-feed": "^2.0.11",
    "gatsby-plugin-google-analytics": "^2.0.8",
    "gatsby-plugin-google-fonts": "0.0.4",
    "gatsby-plugin-jss": "^2.0.5",
    "gatsby-plugin-layout": "^1.0.10",
    "gatsby-plugin-manifest": "^2.0.9",
    "gatsby-plugin-netlify-cms": "^3.0.9",
    "gatsby-plugin-nprogress": "^2.0.7",
    "gatsby-plugin-offline": "^2.0.16",
    "gatsby-plugin-react-helmet": "^3.0.2",
    "gatsby-plugin-sharp": "^2.0.15",
    "gatsby-plugin-sitemap": "^2.0.3",
    "gatsby-remark-embed-video": "^1.4.0",
    "gatsby-remark-responsive-iframe": "^2.0.7",
    "gatsby-source-filesystem": "^2.0.8",
    "gatsby-transformer-json": "^2.1.6",
    "gatsby-transformer-remark": "^2.1.17",
    "gatsby-transformer-sharp": "^2.1.8",
    "html-to-text": "^4.0.0",
    "prop-types": "^15.6.2",
    "react": "^16.7.0-alpha.2",
    "react-dom": "^16.7.0-alpha.2",
    "react-helmet": "^5.2.0",
    "react-icons": "^3.2.2",
    "react-jss": "^8.6.1",
    "react-lazyload": "^2.3.0",
    "react-motion": "^0.5.2",
    "react-redux": "^6.0.0",
    "react-toastify": "^4.5.1",
    "redux": "^4.0.1",
    "redux-form": "^8.0.4",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build:run": "gatsby build && npm run serve && gatsby serve -p 3000",
    "build": "gatsby build",
    "start": "gatsby develop -p 3000",
    "serve": "gatsby serve -p 3000",
    "format": "prettier --write ./src/**/*.js",
    "test": "jest",
    "test:watch": "jest --watch",
    "storybook": "start-storybook -p 9001 -c .storybook"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@storybook/addon-actions": "^4.1.2",
    "@storybook/addon-backgrounds": "^4.1.2",
    "@storybook/addon-info": "^4.1.2",
    "@storybook/addon-links": "^4.1.2",
    "@storybook/addon-notes": "^4.1.2",
    "@storybook/addon-options": "^4.1.2",
    "@storybook/addons": "^4.1.2",
    "@storybook/react": "^4.1.2",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-preset-gatsby": "^0.1.6",
    "eslint": "^5.10.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.3.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-react-hooks": "0.0.0",
    "jest": "^23.6.0",
    "jest-dom": "^3.0.0",
    "jest-extended": "^0.11.0",
    "prettier": "^1.15.2",
    "prettier-eslint": "^8.8.2",
    "react-testing-library": "^5.4.0",
    "redux-devtools-extension": "^2.13.7",
    "storybook-addon-material-ui": "^0.9.0-alpha.16"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

System:

OS: Windows10
Framework: React / Gatsby V2 / Material-UI
Addons: @storybook/addons-actions @storybook/addons-backgrounds @storybook/addons-info @storybook/addons-links @storybook/addons-notes @storybook/addons-options @storybook/addons @storybook/react

babel / webpack question / support

Source