storybook: Possible memory leak after upgrade to Storybook 6.5.10

Hello, After upgrading to storybook 6.5.10 frequently I’m getting some kind of memory leak. I’m making in a react library with typescript.

I’m using few plugins

addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/preset-create-react-app',
'@storybook/addon-a11y'
],
framework: '@storybook/react',

Error:

<--- Last few GCs --->

[296651:0x649b000]    76524 ms: Scavenge 2043.8 (2082.5) -> 2042.7 (2087.0) MB, 5.2 / 0.0 ms  (average mu = 0.434, current mu = 0.367) allocation failure 
[296651:0x649b000]    77468 ms: Mark-sweep (reduce) 2046.1 (2087.0) -> 2044.6 (2082.5) MB, 536.5 / 0.0 ms  (+ 241.1 ms in 53 steps since start of marking, biggest step 7.1 ms, walltime since start of marking 816 ms) (average mu = 0.350, current mu = 0.251

<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb0a860 node::Abort() [/nodejs/16.16.0/bin/node]
 2: 0xa1c193 node::FatalError(char const*, char const*) [/nodejs/16.16.0/bin/node]
 3: 0xcf9a6e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/nodejs/16.16.0/bin/node]
 4: 0xcf9de7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/nodejs/16.16.0/bin/node]
 5: 0xeb1685  [/nodejs/16.16.0/bin/node]
 6: 0xec134d v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/nodejs/16.16.0/bin/node]
 7: 0xec404e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/nodejs/16.16.0/bin/node]
 8: 0xe8558a v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/nodejs/16.16.0/bin/node]
 9: 0x11fe2d6 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/nodejs/16.16.0/bin/node]
10: 0x15f2d39  [/nodejs/16.16.0/bin/node]
RpcIpcMessagePortClosedError: Process 296651 exited [SIGABRT].
Issues checking service aborted - probably out of memory. Check the `memoryLimit` option in the ForkTsCheckerWebpackPlugin configuration.
If increasing the memory doesn't solve the issue, it's most probably a bug in the TypeScript or EsLint.
RpcIpcMessagePortClosedError: Process 296651 exited [SIGABRT].
Issues checking service aborted - probably out of memory. Check the `memoryLimit` option in the ForkTsCheckerWebpackPlugin configuration.
If increasing the memory doesn't solve the issue, it's most probably a bug in the TypeScript or EsLint.

My package.json libs

"dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@fontsource/open-sans": "^4.5.8",
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@mui/material": "^5.5.1",
    "@mui/x-date-pickers": "^5.0.0-alpha.6",
    "@types/jsonwebtoken": "^8.5.8",
    "axios": "^0.27.2",
    "date-fns": "^2.28.0",
    "formik": "^2.2.9",
    "jsonwebtoken": "^8.5.1",
    "preact": "10.10.6", // I also tried with react version 17
    "react-error-boundary": "3.1.4",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
},
"peerDependencies": {
    "react": "npm:@preact/compat", // I also tried with react version 17
    "react-dom": "npm:@preact/compat", // I also tried with react version 17
    "react-router-dom": "^6.3.0"
},
"devDependencies": {
    "@storybook/addon-a11y": "^6.5.10",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/builder-webpack5": "^6.5.10",
    "@storybook/manager-webpack5": "^6.5.10",
    "@storybook/node-logger": "^6.5.10",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^14.1.1",
    "@types/jest": "^27.4.1",
    "@types/jest-axe": "^3.5.3",
    "@types/node": "^16.11.26",
    "@types/react": "^18.0.15 || ^17.0.40",
    "@types/react-dom": "^18.0.15 || ^17.0.13",
    "climem": "^1.0.3",
    "eslint": "^8.14.0",
    "eslint-plugin-jest-dom": "^4.0.1",
    "eslint-plugin-storybook": "^0.6.3",
    "eslint-plugin-testing-library": "^5.3.1",
    "husky": "^7.0.4",
    "jest-axe": "^6.0.0",
    "node-sass": "^7.0.1",
    "prettier": "^2.2.1",
    "react-refresh": "^0.14.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "sass": "^1.49.9",
    "typescript": "^4.6.2",
    "webpack": "^5.70.0"
},

Some additional info, I also tried with other node and npm versions:

node -v v16.16.0

npm -v 8.11.0

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 24 (5 by maintainers)

Most upvoted comments

Small update here, I’ve upgraded to webpack 5 and the leak is gone, but the loading takes minutes at best, whether I put 1 story or 90.

I’m not sure how to fix it, I need some direction in debugging locally what the performance issue seems to be. Does anybody know if there is a way to debug timing spent by storybook on different phases of the dev server process?

LucaColonnello on Sep 29, 2022

Are you using yarn or pnpm @jmmccota ?

@LucaColonnello I’m using NPM, I’ll try with yarn to see what happens

jmmccota on Aug 22, 2022

Following this https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/main/README.md#options, I’ve added this

"fork-ts-checker": {
	"typescript": {
		"memoryLimit": 4096
	}
}

And the error is gone, for while

jmmccota on Aug 31, 2022

Hey @jmmccota ! So basically I opened the watchpack package in my node_modules and commented the file and directory watchers instantiations. The code depends on what version of webpack you’re using. As you’re on v5, this might be a bit different for you though, but that’s what I did…

LucaColonnello on Aug 25, 2022

I was able to narrow it down to watchpack watching directories. As soon as I disable the watcher (manually commenting it out), everything works just as fine.

More specifically, it’s the directory watcher, not the file ones…

LucaColonnello on Aug 24, 2022

Ah I see @zhyd1997 thank you! yeaaah we have something like 90+ stories, which is what’s hard to reproduce as it works just fine if we halve the amount of stories we load.

LucaColonnello on Aug 22, 2022

@LucaColonnello

What I mean is Ledger Live has no memory leak issue, not sure what’s happened.

zhyd1997 on Aug 22, 2022

@LucaColonnello I’m using NPM, I’ll try with yarn to see what happens

@LucaColonnello same issue here

jmmccota on Aug 22, 2022