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

dantman · 2022-06-11T03:45:08Z

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

> [email protected] 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.

The text was updated successfully, but these errors were encountered:

dantman · 2022-06-11T03:56:53Z

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.

timesp · 2022-07-18T05:10:22Z

I have meet the same issue

nkCreation · 2022-07-29T09:48:19Z

Hello! I have the same problem since I updated to the latest version storybook/builder-vite (0.2.2). Everything works well before this update. If I revert this, it works perfectly.

Is this related ?

IanVS · 2022-07-29T12:42:17Z

@nkCreation what version were you using before? Did you upgrade vite at the same time?

IanVS · 2022-07-29T12:44:31Z

Note, you can use --max-old-space-size to give node more than the 1.5gb that it gets by default. See #282 (comment) for a way to do this in github actions.

nkCreation · 2022-08-26T09:16:21Z

Sorry for the delay, was on holiday :) I am on a pod on a private gitlab using vite v3 (at the moment 3.0.9) :)

nkCreation · 2022-08-26T09:19:32Z

The error I have :

<--- Last few GCs --->
[96:0x59498f0]    45154 ms: Mark-sweep 1012.8 (1047.1) -> 1005.4 (1047.9) MB, 670.2 / 0.0 ms  (average mu = 0.140, current mu = 0.011) allocation failure scavenge might not succeed
[96:0x59498f0]    46023 ms: Mark-sweep 1013.3 (1047.9) -> 1006.0 (1048.1) MB, 856.9 / 0.0 ms  (average mu = 0.073, current mu = 0.014) allocation failure scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

storybookjs/builder-vite#409 (comment)

emewjin · 2022-10-13T04:42:29Z

I have meet the same issue.

"vite": "3.1.0",
"@storybook/builder-vite": "^0.2.4",

IanVS · 2022-10-13T12:25:01Z

It's not just us, unfortunately. The underlying issue in Vite has by far the most 👍 of any issue there: vitejs/vite#2433.

TheMightyPenguin · 2022-10-28T21:44:06Z

@emewjin @IanVS if it does help, I was able to workaround this by disabling sourcemaps in my Vite config for storybook:

module.exports = {
  viteFinal: (config) => {
    return {
      ...config,
      build: {
        ...config.build,
        sourcemap: false,
        target: ['es2020'],
      },
    }
  },
}

Also mentioned it here vitejs/vite#2433 (comment)

lucianobarauna · 2022-11-17T20:23:21Z

@dantman this solution worked in my case

the-night-wing · 2023-03-28T22:44:31Z

Thanks to @EfstathiadisD and @nstanard from this thread: vitejs/vite/issues/2433(comment).

They suggested to use manualChunks and sourcemapIgnoreList, cache: false and maxParallelFileOps: 2 in vite config. Because of the first two I was getting some error with inlineDynamicImports, so updated all the vite and storybook to latest versions, and applied the next config:

export default defineConfig({
  plugins: [react(), dts({ insertTypesEntry: true })],
  build: {
    sourcemap: false,
    lib: {
      name: 'web-ui',
      entry: resolve(__dirname, 'src/index.ts'),
      fileName: 'web-ui',
      formats: ['es']
    },
    rollupOptions: {
      maxParallelFileOps: 2,
      cache: false,
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        },
        sourcemap: true,
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
        inlineDynamicImports: false,
        sourcemapIgnoreList: (relativeSourcePath) => {
          const normalizedPath = path.normalize(relativeSourcePath);
          return normalizedPath.includes('node_modules');
        },
      }
    }
  }
});

and used the next script for building in GitLab:

"scripts": {
    ...
    "build-sb": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096 --openssl-legacy-provider\" build-storybook"
}

Packages versions on the moment of writing the comment:

    "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-vite": "^0.4.2",
    "@storybook/jest": "^0.0.10",
    "@storybook/react": "^6.5.16",
    "@storybook/test-runner": "^0.9.4",
    "@storybook/testing-library": "^0.0.13",
    "@vitejs/plugin-react": "^3.1.0",
    "storybook-addon-designs": "^6.3.1",
    "typescript": "^5.0.2",
    "vite": "^4.2.1",
    "vite-plugin-dts": "^2.1.0"

See: storybookjs/builder-vite#409

dantman added the bug Something isn't working label Jun 11, 2022

originalwebgurl mentioned this issue Jul 21, 2022

[Vite] Chromatic github action - JavaScript heap out of memory chromaui/chromatic-cli#550

Closed

naftis added a commit to opencrvs/opencrvs-core that referenced this issue Aug 29, 2022

Try out if minify false & sourcemap false helps with max memory limit

250c00e

storybookjs/builder-vite#409 (comment)

IanVS added the upstream This is an issue with another package label Oct 13, 2022

neretin-trike mentioned this issue Mar 16, 2023

feat(plasma-*): Replace builder for storybook to Vite salute-developers/plasma#383

Merged

icaroharry added a commit to codante-io/codante-io-front that referenced this issue Apr 1, 2024

Increase node memory to avoid vite build error

43b867a

See: storybookjs/builder-vite#409

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

dantman commented Jun 11, 2022 •

edited

Loading

dantman commented Jun 11, 2022 •

edited

Loading

timesp commented Jul 18, 2022

nkCreation commented Jul 29, 2022

IanVS commented Jul 29, 2022

IanVS commented Jul 29, 2022

nkCreation commented Aug 26, 2022 •

edited

Loading

nkCreation commented Aug 26, 2022

emewjin commented Oct 13, 2022 •

edited

Loading

IanVS commented Oct 13, 2022

TheMightyPenguin commented Oct 28, 2022 •

edited

Loading

lucianobarauna commented Nov 17, 2022

the-night-wing commented Mar 28, 2023 •

edited

Loading

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

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

Comments

dantman commented Jun 11, 2022 • edited Loading

What version of vite are you using?

System info and storybook versions

Describe the Bug

Link to Minimal Reproducible Example

Participation

dantman commented Jun 11, 2022 • edited Loading

timesp commented Jul 18, 2022

nkCreation commented Jul 29, 2022

IanVS commented Jul 29, 2022

IanVS commented Jul 29, 2022

nkCreation commented Aug 26, 2022 • edited Loading

nkCreation commented Aug 26, 2022

emewjin commented Oct 13, 2022 • edited Loading

IanVS commented Oct 13, 2022

TheMightyPenguin commented Oct 28, 2022 • edited Loading

lucianobarauna commented Nov 17, 2022

the-night-wing commented Mar 28, 2023 • edited Loading

dantman commented Jun 11, 2022 •

edited

Loading

What version of `vite` are you using?

dantman commented Jun 11, 2022 •

edited

Loading

nkCreation commented Aug 26, 2022 •

edited

Loading

emewjin commented Oct 13, 2022 •

edited

Loading

TheMightyPenguin commented Oct 28, 2022 •

edited

Loading

the-night-wing commented Mar 28, 2023 •

edited

Loading