Javascript heap out of memory when doing build-storybook

Describe the bug When trying to do build-storybook it gets to 92% and then fails with the following out of memory error:

92% chunk asset optimization TerserPlugin
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF7CF93EEE5 
 2: 00007FF7CF918CD6 
 3: 00007FF7CF9196E0 
 4: 00007FF7CFD80D3E 
 5: 00007FF7CFD80C6F 
 6: 00007FF7CFCCC594 
 7: 00007FF7CFCC2B67 
 8: 00007FF7CFCC10DC 
 9: 00007FF7CFCCA0B7 
10: 00007FF7CFCCA136 
11: 00007FF7CFDEF7B7 
12: 00007FF7CFEC87FA 
13: 000000D1798DC6C1 
error Command failed with exit code 134.

The entirety of my source code is less than 1 MB so not sure why I would be OOM.

To Reproduce Steps to reproduce the behavior:

Run yarn build-storybook

Expected behavior The build shouldn’t fail.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets

My current webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        // This line added as an earlier solution to this OOM error
        minimizer: [new TerserPlugin({ parallel: false })],
      },
    resolve: {
        extensions: ['.ts', '.tsx']
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: 'source-map-loader',
            exclude: /node_modules/,
            enforce: 'pre'
          },
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
          },
          {
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader", options: {
                    sourceMap: true
                }
            }, {
                loader: "sass-loader", options: {
                    sourceMap: true
                }
            }]
          },
          {
            test: /\.stories\.tsx?$/,
            loaders: [{
                loader: require.resolve('@storybook/addon-storysource/loader'),
                options: {
                    parser: 'typescript'
                }
            }],
            enforce: 'pre',
        }
        ]
      }
}

My current .storybook config.js

import { addDecorator, configure } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';
import { withKnobs } from '@storybook/addon-knobs';

// add withKnobs
addDecorator(withKnobs);

// Option defaults:
// Full settings here: https://github.com/storybooks/storybook/tree/master/addons/options
addDecorator(
  withOptions({
    name: 'some-package Storybook',
    showAddonPanel: false,
    addonPanelInRight: true,
    showStoriesPanel: false,
    sortStoriesByKind: true
  })
);

function loadStories() {
  const req = require.context('../src/', true, /\.stories\.tsx?$/)
  req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);

I also tried changing the build-storybook command in my package.json to force increase the memory, but that doesn’t seem to work either. "build-storybook": "npx --max_old_space_size=16384 build-storybook"

My full package.json

{
  "name": "some-package",
  "version": "0.0.1",
  "description": "PackageDescription",
  "registry": "https://myurl.com/",
  "main": "dist/charts.js",
  "types": "dist/charts.d.ts",
  "license": "ISC",
  "engines": {
    "node": ">=8.*",
    "yarn": ">=1.*"
  },
  "scripts": {
    "auth": "npx vsts-npm-auth -config .npmrc",
    "dev": "webpack --mode=development",
    "dev:watch": "webpack --mode=development --watch",
    "build": "webpack --mode=production",
    "lint": "tslint ./src/**/*.{ts,tsx}",
    "fix_coverage": "node ./fix_coverage.js",
    "test": "yarn lint && jest --coverage",
    "test:watch": "yarn lint && jest --watch",
    "test:watchAll": "yarn lint && jest --watchAll",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "npx --max_old_space_size=16384 build-storybook"
  },
  "dependencies": {
    "json5": "^2.1.0",
    "lodash": "4.17.11",
    "moment": "^2.24.0",
    "react-localization": "^1.0.13",
    "react-select": "^2.3.0",
    "react-split-pane": "0.1.77",
    "sinon": "^7.2.3",
    "ts-mock-imports": "^1.2.2"
  },
  "peerDependencies": {
    "office-ui-fabric-react": "6.*",
    "plotly.js": "1.*",
    "react": "16.*",
    "react-dom": "16.*",
    "react-localization": "^1.0.13",
    "react-plotly.js": "2.*",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "7.1.6",
    "@storybook/addon-knobs": "4.1.16",
    "@storybook/addon-options": "4.1.16",
    "@storybook/addon-storysource": "4.1.16",
    "@storybook/react": "4.1.16",
    "@types/enzyme": "^3.1.15",
    "@types/jest": "^23.3.10",
    "@types/lodash": "4.14.118",
    "@types/plotly.js": "1.41.0",
    "@types/react": "16.7.9",
    "@types/react-dom": "16.0.11",
    "@types/react-plotly.js": "2.2.2",
    "@types/react-select": "^2.0.11",
    "@types/storybook__addon-knobs": "4.0.4",
    "@types/storybook__react": "4.0.1",
    "@types/uuid": "^3.4.4",
    "babel-loader": "8.0.4",
    "clean-webpack-plugin": "1.0.0",
    "css-loader": "^2.1.0",
    "dts-bundle-webpack": "1.0.1",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "enzyme-to-json": "^3.3.5",
    "fork-ts-checker-webpack-plugin": "0.5.0",
    "fs-jetpack": "2.2.0",
    "gulp-jest": "^4.0.2",
    "identity-obj-proxy": "^3.0.0",
    "inline-css": "2.4.1",
    "jest": "^23.6.0",
    "jest-canvas-mock": "^1.1.0",
    "jest-cli": "^24.1.0",
    "jest-junit": "5.2.0",
    "net": "^1.0.2",
    "node-sass": "^4.11.0",
    "office-ui-fabric-react": "6.158.0",
    "plotly.js": "^1.44.4",
    "react": "16.6.3",
    "react-dom": "16.6.3",
    "react-plotly.js": "2.2.0",
    "sass-loader": "^7.1.0",
    "source-map-loader": "0.2.4",
    "style-loader": "^0.23.1",
    "terser-webpack-plugin": "^1.2.3",
    "tls": "^0.0.1",
    "ts-jest": "23.10.5",
    "ts-loader": "5.3.1",
    "tslint": "5.11.0",
    "tslint-config-prettier": "1.17.0",
    "tslint-react": "3.6.0",
    "typescript": "3.2.1",
    "webpack": "4.29.6",
    "webpack-cli": "3.3.0"
  }
}

System:

• OS: Windows 10
• Device: HP Desktop
• Browser: Chrome
• Framework: React
• Addons: @storybook/addon-knobs, @storybook/addon-options, @storybook/addon-storysource
• Version: 4.1.16

[jfoliveira]

Storybook as a component gallery is an amazing project and then we’re here: developers struggling to take the most of this beautiful tool due to bundling size optimization issues - bundling that is not even needed in many scenarios.

Why is bundling such an important thing for a project like Storybook that mainly targets internal audience? A very successful web app with 1 million daily users will share their components in Storybook with all their users? I don’t think so.

It’s very likely only devs, product owners, managers, designers, UX/UI teams will need to interact with a Storybook instance. How big can an internal team like that be? 500 (five hundred) people in a really big enterprise? And how many of them will be interacting with Storybook from a slow internet connection? I can’t say, but it seems to me that will actually be an edge case.

In a scenario with up to 500 Storybook users is all this out-of-the-box optimization really worth it?

Sorry, I’m completely new to this project and don’t mean to be critical, just putting this as food for thought. I hope it’s taken as some opportunity for improvement rather than as a negative feedback.

[bismarkhenao]

I was digging on this error, and what I found was that I was using this PropTypes.arrayOf() on one of my components, after change it to PropTypes.arrayOf([]) it worked again. 😕