Storybook: start-storybook command freezes at 25%, JS heap OOM

[micahstubbs]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

What did you expect to happen?

I expected storybook to build modules using webpack and launch the storybook UI in the browser

I expected What happened instead?_

The module building process in the terminal stopped at 25%, froze for several minutes, and then produced a Javascript heap Out-of-Memory error

---

EDIT there is a solution

🎉 figured it out

it turns out upgrading from "babel-core": "6.26.0" to "babel-core": "6.26.3" caused this bug for me.

modifying the babel dependency in my package.json from "babel-core": "^6.26.0" to "babel-core": "6.26.0" (without the ^ character) fixed it.

---

Steps to reproduce

start-storybook --port 6001

will create an OSS repro repo soon. don't have an easy to share example at the moment.

Please specify which version of Storybook and optionally any affected addons that you're running

    "@storybook/addon-actions": "^3.4.8",
    "@storybook/addon-links": "^3.4.8",
    "@storybook/addons": "^3.4.8",
    "@storybook/react": "^3.4.8",

Affected platforms

MacOS High Sierra 10.13.5
nodejs v8.11.1
yarn 1.7.0

Screenshots / Screencast / Code Snippets (Optional)

$ yarn storybook --port 6001
yarn run v1.7.0
$ start-storybook --port 6001
info @storybook/react v3.4.8
info
info => Loading custom .babelrc
info => Loading custom webpack config (extending mode).
 25% building modules 131/155 modules 24 active ...ook/core/node_modules/qs/lib/utils.js
<--- Last few GCs --->

[24764:0x102801e00]   247386 ms: Mark-sweep 1655.7 (1727.1) -> 1655.6 (1727.1) MB, 1428.8 / 0.0 ms  allocation failure GC in old space requested
[24764:0x102801e00]   248949 ms: Mark-sweep 1655.6 (1727.1) -> 1655.4 (1694.6) MB, 1562.4 / 0.0 ms  last resort GC in old space requested
[24764:0x102801e00]   250500 ms: Mark-sweep 1655.4 (1694.6) -> 1655.4 (1694.6) MB, 1550.8 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x2f7f75e257c1 <JSObject>
    1: push(this=0x2f7faf2102f9 <JSArray[50855]>)
    2: /* anonymous */(aka /* anonymous */) [/Users/m/workspace/repo-name/node_modules/babel-core/lib/transformation/file/merge-map.js:~253] [pc=0x70a8a9f35fc](this=0x2f7f64402201 <null>,m=0x2f7fda0f28b1 <Object map = 0x2f7f0de78341>)
    3: arguments adaptor frame: 3->1
    4: forEach(this=0x2f7faf210361 <JSArray[54629]>)
    5: eachMapping(...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/Users/m/.nvm/versions/node/v8.11.1/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/Users/m/.nvm/versions/node/v8.11.1/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/Users/m/.nvm/versions/node/v8.11.1/bin/node]
 4: v8::internal::Factory::NewUninitializedFixedArray(int) [/Users/m/.nvm/versions/node/v8.11.1/bin/node]
 5: v8::internal::(anonymous namespace)::ElementsAccessorBase<v8::internal::(anonymous namespace)::FastPackedObjectElementsAccessor, v8::internal::(anonymous namespace)::ElementsKindTraits<(v8::internal::ElementsKind)2> >::ConvertElementsWithCapacity(v8::internal::Handle<v8::internal::JSObject>, v8::internal::Handle<v8::internal::FixedArrayBase>, v8::internal::ElementsKind, unsigned int, unsigned int, unsigned int, int) [/Users/m/.nvm/versions/node/v8.11.1/bin/node]
 6: v8::internal::(anonymous namespace)::ElementsAccessorBase<v8::internal::(anonymous namespace)::FastPackedObjectElementsAccessor, v8::internal::(anonymous namespace)::ElementsKindTraits<(v8::internal::ElementsKind)2> >::GrowCapacityAndConvertImpl(v8::internal::Handle<v8::internal::JSObject>, unsigned int) [/Users/m/.nvm/versions/node/v8.11.1/bin/node]
 7: v8::internal::(anonymous namespace)::ElementsAccessorBase<v8::internal::(anonymous namespace)::FastPackedObjectElementsAccessor, v8::internal::(anonymous namespace)::ElementsKindTraits<(v8::internal::ElementsKind)2> >::Add(v8::internal::Handle<v8::internal::JSObject>, unsigned int, v8::internal::Handle<v8::internal::Object>, v8::internal::PropertyAttributes, unsigned int) [/Users/m/.nvm/versions/node/v8.11.1/bin/node]
 8: v8::internal::JSObject::AddDataElement(v8::internal::Handle<v8::internal::JSObject>, unsigned int, v8::internal::Handle<v8::internal::Object>, v8::internal::PropertyAttributes, v8::internal::Object::ShouldThrow) [/Users/m/.nvm/versions/node/v8.11.1/bin/node]
 9: v8::internal::Runtime_SetProperty(int, v8::internal::Object**, v8::internal::Isolate*) [/Users/m/.nvm/versions/node/v8.11.1/bin/node]
10: 0x70a8a8842fd
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[micahstubbs]

not sure if this is user error, a problem with yarn, or a problem with storybook. will post this here in case smarter people that me can spot the cause quickly, on the chance that the cause is storybook-related 😅

[micahstubbs]

for what it's worth, my yarn script I use is "storybook": "start-storybook",

I then use it like this:

yarn storybook --port 6001

[micahstubbs]

troubleshooting steps I've already tried, without success:

• removing node_modules and reinstalling

rm-rf node_modules
yarn install

• restarting my machine
• installing node_modules and running the start-storybook command with npm

[micahstubbs]

maybe the problem is something to do with babel and source maps? this file from the error message stands out:

node_modules/babel-core/lib/transformation/file/merge-map.js

full error message https://github.com/storybooks/storybook/issues/3806#issue-336362744

[micahstubbs]

here's the .storybook/webpack.config.js I'm using in my project, in case this is helpful

// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add additional webpack configurations.
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config

// IMPORTANT
// When you add this file, we won't add the default configurations which is similar
// to "React Create App". This only has babel loader to load JavaScript.

module.exports = {
  plugins: [
    // your custom plugins
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.styl$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: false,
              localIdentName: '[name]-[local]-[hash:base64:5]'
            }
          },
          {
            loader: 'stylus-loader',
            options: {
              sourceMap: false
            }
          }
        ]
      },
      {
        test: /\.(eot|ttf|woff|woff2|svg|jpe?g|png)$/,
        exclude: /node_modules/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'static/[name]-[hash:8].[ext]'
          }
        }
      }
    ]
  }
}

[micahstubbs]

🎉 figured it out

it turns out upgrading from "babel-core": "6.26.0" to "babel-core": "6.26.3" caused this bug for me.

modifying the babel dependency in my package.json from "babel-core": "^6.26.0" to "babel-core": "6.26.0" (without the ^ character) fixed it.

👋 📺 thanks for tuning in everyone. hope this is helpful to some poor soul in the future with babel version problems.

[igor-dv]

So happy we've RubberDucked you 🦆
👍

[andy-law]

For anyone who might stumble across this issue with a similar error, if you're using Typescript and you've recently upgraded Storybook you may just need to remove ts-loader from the webpack config for Storybook 👍