Crashing and performance issues with storybook 5.3

[EdenTurgeman]

I've been using react-docgen-typescript-loader ever since @storybook/addon-docs came out. Recently whilst upgrading to the beta and eventually to the stable 5.3 i've experienced major performance issues where compile times are way longer. Now that would be one thing but recently my project started not compiling at all and running out of memory while trying to serve webpack, all those problems make storybook unusable right now and made me disable the plugin after trying seemingly everything.

Here is my out of memory error:

<--- JS stacktrace --->

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

    0: ExitFrame [pc: 0x21956a9cfc7d]
Security context: 0x30147a51d9d1 <JSObject>
    1: createSource [0x30146397d359] [/Users/edenturgeman/_____/_____/storybook/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:~243] [pc=0x21956cf7b24d](this=0x3014b21b0bc9 <DependenciesBlock map = 0x30147c628401>,0x3014b5fc7a11 <String[120]\: var hasOwnProperty = {}.hasOwnProperty;\nmodule.exports = function (it, key) {\n  r...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20200114.121417.10045.0.001.json
Node.js report completed
 1: 0x100069ede node::Abort() [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
 2: 0x10006a62e node::errors::TryCatchScope::~TryCatchScope() [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
 3: 0x1001b5827 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
 4: 0x1001b57c4 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
 5: 0x1005bc702 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
 6: 0x1005bec33 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
 7: 0x1005bb168 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
 8: 0x1005b9325 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
 9: 0x1005c5bcc v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
10: 0x1005c5c4f v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
11: 0x100594e44 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
12: 0x1008476e4 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/Users/edenturgeman/.nvm/versions/node/v11.14.0/bin/node]
13: 0x21956a9cfc7d 
14: 0x21956cf7b24d 
15: 0x21956a98e458 
16: 0x21956a98e458 
error Command failed with signal "SIGABRT".

My main.js:

const path = require('path');

module.exports = {
  stories:['../stories/**/*.story.*'],
  addons:[
    '@storybook/addon-knobs',
    '@storybook/addon-storysource',
    '@storybook/addon-options',
    '@storybook/addon-actions',
    //'@storybook/addon-notes',
  {
    name: '@storybook/addon-docs/preset',
    options: {
      configureJSX: true,
      sourceLoaderOptions: null,
    },
  },
  {
    name: "@storybook/preset-typescript",
    options: {
      tsLoaderOptions: {
        transpileOnly: true,
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      },
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
      },
      forkTsCheckerWebpackPluginOptions: {
        colors: false, // disables built-in colors in logger messages
      },
      include: [path.resolve(__dirname, '../stories')],
    },
  }
]
};

My preview.js:

import React from 'react';
import { addDecorator } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';
import { withKnobs } from '@storybook/addon-knobs';
import { bootstrap } from '@____/styleguide';
import { StoryContainer } from "../stories/storyComponents/StoryContainer";

bootstrap();

const storyBookDecorators = [
  withKnobs,
  withOptions({
    name: `@____/styleguide`,
    url: 'https://github.com/____/______/tree/master/styleguide',
    hierarchyRootSeparator: /\|/,
  }),
];

addDecorator(Story =>
  <StoryContainer>
    <Story />
  </StoryContainer>
);

storyBookDecorators.forEach(addon => addDecorator(addon));

My Webpack.config.js:

const {resolve, join, dirname} = require("path");
const styleguideContext = dirname(require.resolve('@____i/styleguide'));
const { jsRule, tsRule, cssRule  } = require('@_____/webpack');
const { browserProdConfig } = require('@_____/babel-config');

const ignoredProps = ['as', 'css', 'theme', 'ref'];

const storybookDocGenRule = () => ({
  test: /\.(tsx|ts)?$/,
  use: [
    require.resolve("ts-loader"),
    {
      loader: require.resolve("react-docgen-typescript-loader"),
      options: {
        propFilter: prop => {
          if (ignoredProps.includes(prop.name)) {
            return false;
          }

          if (prop.parent) {
            return (
              !prop.parent.fileName.includes('node_modules/@types/react/') &&
              !prop.parent.fileName.includes('@types/styled-system')
            );
          }

          return true;
        },
      },
    }
  ],

  exclude: [
    resolve(__dirname, "../node_modules")
  ],
});

module.exports = ({ config }) => {
  config.context = (join(__dirname, '../'));

  config.module.rules =[
    tsRule({configFileName: join(__dirname, '../tsconfig.json'),
    include: [join(__dirname, '../stories')]}),
    storybookDocGenRule(),
    jsRule(browserProdConfig),
    {
      test: /\.story\.(jsx|js)?$/,
      loaders: [require.resolve('@storybook/addon-storysource/loader')],
      enforce: 'pre',
    },
    cssRule,
    ];

  config.resolve.extensions.push(".ts", ".tsx");

  config.resolve.alias = {
    '@logz-ui/styleguide': resolve(styleguideContext)
  };
  return config;
};

[UberMouse]

I've run into this problem unrelated to this project. Webpack can use a lot of memory compiling Typescript. I've solved it by including these options in my storybook script in package.json NODE_OPTIONS='--max-old-space-size=4096' it increases the memory node is allowed to allocate significantly (I think the default is 1024)

[EdenTurgeman]

@UberMouse Hey, did you manage to get this to work with storybook? Because even after adding this param my problem persists and storybook doesn't seem to even pay attention to this option. "watch": "start-storybook -p 7071 -c .storybook NODE_OPTIONS=--max-old-space-size=4096"

Seems that the memory stays at 2k or am I looking at the wrong thing

[UberMouse]

You need to add the options to the command slightly differently, here is my script command for reference NODE_OPTIONS='--max-old-space-size=4096' NODE_ENV=storybook start-storybook -s matai -p 6006

[EdenTurgeman]

@UberMouse Looks like I got it to work but the image I uploaded is still relevant afterward: NODE_OPTIONS='--max-old-space-size=4096' NODE_ENV=storybook start-storybook -p 7071 -c .storybook Looks like the limit is still in place, did you manage to make it work?