Storybook: Storybook running out of memory when building

[huntjosh]

Describe the bug
After upgrading from 6.0.12 to 6.0.21 when running npx http-server ./lib/storybook -p 8082 -a localhost at 69% built I get: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Note: in the past we have had the same problem on 5.x versions, which were resolved by upgrading node.

I appreciate this lacks a lot of context, and it's a private repo so I'm unable to share as is, but if anyone is able to point me in the direction of diagnosing or potential causes, that would be of great help.

We are running typescript.

To Reproduce
Steps to reproduce the behavior:

Run npx http-server ./lib/storybook -p 8082 -a localhost

Expected behavior
Builds as expected

System:
Please paste the results of npx sb@next info here.

System:
OS: Windows 10 10.0.19041
CPU: (8) x64 Intel(R) Core(TM) i7-8650U
Binaries:
Node: 12.16.1 - C:Program Filesnodejs
npm: 6.13.4 - C:Program Filesnodejsn
Browsers:
Chrome: 84.0.4147.135
Edge: Spartan (44.19041.423.0), Chromiu
npmPackages:
@storybook/addon-actions: 6.0.21 => 6.0
@storybook/addon-essentials: 6.0.21 =>
@storybook/addon-knobs: 6.0.21 => 6.0.2
@storybook/addon-links: 6.0.21 => 6.0.2
@storybook/addon-toolbars: 6.0.21 => 6.
@storybook/addons: 6.0.21 => 6.0.21
@storybook/react: 6.0.21 => 6.0.21
@storybook/theming: 6.0.21 => 6.0.21

[shilman]

What happens if you set the following in .storybook/main.js:

module.exports = { 
  typescript: { reactDocgen: 'none' }
}

[ffjanhoeck]

Having the same issue, since I upgraded from 5.x to 6.x
I am not able to get this fixed.
Your solution does not work @shilman :)

[shilman]

What about

module.exports = { 
  typescript: { reactDocgen: 'react-docgen' }
}

[ffjanhoeck]

@shilman Nope, still failing :(

[shilman]

Can you scope your stories glob in main.js more tightly, i.e. make sure it doesn't include node_modules?

[ffjanhoeck]

@shilman I am currently just have 5 tiny stories :) How do I make sure not to include the node_modules folder?

[ffjanhoeck]

@shilman the build-storybook script is working for me but not the start-storybook -p 6006 -c .storybook command :) I think that wasn't clear before

[shilman]

@ffjanhoeck for example, consider the following two globs:

1. '../**/*.stories.*'
2. '../src/**/*.stories.*'

the former finds all the stories under the parent directory (which probably includes node_modules and maybe hundreds or thousands of more files). even tho there are only a few stories, the process still scans over a lot.

[ffjanhoeck]

@shilman Ok got it. I confirm that the node_modules folder isn't included: ../stories/**/*.stories.@(tsx)

[shilman]

@ffjanhoeck do you have a repro repo?

[ffjanhoeck]

@shilman I don't have a reproduction repo - sorry for that :/ Our storybook is mixed with our client, which I am not allowed to share :/ Maybe anyone else who has the same problem has a repo :)

[latviancoder]

In our case it happens when running build-storybook with addon-docs (6.0.21 or 6.1.0-alpha.17, doesn't matter).

92% chunk asset optimization UglifyJsPlugin runs for a long time and fails.

main.js

module.exports = {
  stories: ['../src/**/*.story.@(js|ts|jsx|tsx)'],
  addons: [
    '@storybook/addon-knobs',
    '@storybook/addon-backgrounds',
    '@storybook/addon-actions',
    '@storybook/addon-docs',
  ],
};

Adding typescript: { reactDocgen: 'none' } helps but removes prop tables.

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.18.3 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 77.0.1
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.21 => 6.0.21
    @storybook/addon-backgrounds: ^6.0.21 => 6.0.21
    @storybook/addon-docs: ^6.1.0-alpha.17 => 6.0.22
    @storybook/addon-knobs: ^6.0.21 => 6.0.21
    @storybook/addon-storyshots: ^6.0.21 => 6.0.21
    @storybook/addons: ^6.0.21 => 6.0.21
    @storybook/csf: ^0.0.1 => 0.0.1
    @storybook/node-logger: ^6.0.21 => 6.0.21
    @storybook/react: ^6.0.21 => 6.0.21

This is also happening on CI, so I guess it doesn't depend on environment.

[ffjanhoeck]

Since I changed the command from
start-storybook -p 6006 -c .storybook
to
node --max_old_space_size=4096 ./node_modules/@storybook/react/bin/index.js -p 6006 -c .storybook
it works for me!

[latviancoder]

I can confirm that this works.

Although in our case the issue was solved by simply not uglifying storybook build.

[yury-cx]

In my case following construction caused error:
_ => someObj[_?.someProp]
When I replaced ?. with && or just extracted _?.someProp to the separate variable, the problem disappeared.

It's even more strange, because app build is based exactly on the same webpack and babel config as storybook build and it passes without any problem.