[Bug] JavaScript heap out of memory (Vite build works, Storybook w/WebPack 4 works)

What version of vite are you using?

^2.9.12

System info and storybook versions

System: OS: Linux 5.10 Ubuntu 21.10 21.10 (Impish Indri) CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor Binaries: Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node Yarn: 1.22.17 - ~/.yarn/bin/yarn npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm npmPackages: @storybook/addon-a11y: ^6.5.8 => 6.5.8 @storybook/addon-actions: ^6.5.8 => 6.5.8 @storybook/addon-docs: ^6.5.8 => 6.5.8 @storybook/addon-essentials: ^6.5.8 => 6.5.8 @storybook/addon-links: ^6.5.8 => 6.5.8 @storybook/builder-vite: ^0.1.36 => 0.1.36 @storybook/node-logger: ^6.5.8 => 6.5.8 @storybook/preset-create-react-app: ^3.2.0 => 3.2.0 @storybook/react: ^6.5.8 => 6.5.8

"terser": "^5.13.0",
"@vitejs/plugin-react": "^1.1.3",
"vite-plugin-babel-macros": "^1.0.6",
"vite-plugin-checker": "^0.4.6",
"vite-plugin-environment": "^1.1.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-imp": "^2.2.0",
"vite-plugin-mdx": "^3.5.10",
"vite-plugin-svgr": "^2.1.0",
"vitest": "^0.14.2"

Describe the Bug

I’m converting a CRAv4 project to Vite recently I tried building Storybook and found it fails with an out of memory error. I’ve been rebasing the Vite transition continually so I have a CRAv4/Webpack4 comparison of the same project.

It’s not an infinite loop of some sort exhausting memory. If I build using NODE_OPTIONS=--max_old_space_size=8192 (8gb) then it successfully builds. However building with the default or 4gb is not enough and the memory error occurs.

This doesn’t seem to be a Storybook or Vite issue but specifically a vite-builder one because:

• In the same project under CRAv4 and Storybook (same version) with Webpack 4, Storybook successfully builds at the default memory limit
• vite build successfully builds at 4gb, while vite+storybook takes 8gb

$ npm run build-storybook

> portal@0.1.0 build-storybook
> build-storybook

info @storybook/react v6.5.8
info 
info => Cleaning outputDir: {portal}/storybook-static
info => Loading presets
info => Copying static files: {portal}/public at {portal}/storybook-static/
info => Compiling manager..
(node:10077) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at {portal}/node_modules/yaml/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
vite v2.9.12 building for production...
transforming (1050) node_modules/@mui/material/Checkbox/checkboxClasses.jsinfo => Manager built (43 s)
transforming (1417) node_modules/html-entities/lib/surrogate-pairs.js[BABEL] Note: The code generator has deoptimised the styling of {portal}/src/api/client/gen/api.ts as it exceeds the max of 500KB.
transforming (27756) node_modules/react-pdf/dist/esm/Ref.jsUse of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
✓ 27757 modules transformed.
Generated an empty chunk: "react-dom-client-placeholder"
rendering chunks (46)...
<--- Last few GCs --->

[10077:0x698f720]   155709 ms: Scavenge 3995.6 (4109.0) -> 3996.3 (4109.5) MB, 12.2 / 0.0 ms  (average mu = 0.750, current mu = 0.432) allocation failure 
[10077:0x698f720]   155724 ms: Scavenge 3996.3 (4109.5) -> 3995.5 (4133.0) MB, 14.7 / 0.0 ms  (average mu = 0.750, current mu = 0.432) allocation failure 
[10077:0x698f720]   157877 ms: Mark-sweep 4026.1 (4147.9) -> 4009.5 (4146.3) MB, 2138.8 / 0.1 ms  (average mu = 0.510, current mu = 0.041) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb09c10 node::Abort() [node]
 2: 0xa1c193 node::FatalError(char const*, char const*) [node]
 3: 0xcf8dde v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xcf9157 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xeb09f5  [node]
 6: 0xec06bd v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 7: 0xec33be v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
 8: 0xe848fa v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
 9: 0x11fd646 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
10: 0x15f20b9  [node]
Aborted

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.

[dantman]

Another workaround, besides setting your memory limit to double what Vite normally requires, seems to be disabling minification and sourcemaps.

Adding this to my viteFinal allows the build to work with just a 4gb memory limit.

build: {
  minify: false,
  sourcemap: false,
},

Unfortunately, I want sourcemaps and disabling minification along is not enough so I’m not sure I’ll use this workaround.

[IanVS]

It’s not just us, unfortunately. The underlying issue in Vite has by far the most 👍 of any issue there: https://github.com/vitejs/vite/issues/2433.