How to fix Storybook + Vite JavaScript heap out of memory error

I was working on some Storybook components, pushing a commit, and suddenly GitHub Actions fails with:

<--- JS stacktrace --->
FATAL ERROR: Reached heap limit
Allocation failed - JavaScript heap out of memory

Why this happens? It's a known issue on Vite's side, probably one of the most upvoted issues on their GitHub. I am guessing the fix is hard to implement or even track because it has been open for a while. If you're from the future, you can check it out yourself, maybe there's a fix already https://github.com/vitejs/vite/issues/2433

How do we fix it? There're two ways that worked for me. One acceptable, one not.

Increase Node memory allocation

NODE_OPTIONS=--max-old_space_size=16384 npm run storybook:build

for GitHub Actions, create or update your workflow:

env:
  NODE_OPTIONS: '--max_old_space_size=16384'

if you're using Chromatic, you probably want to edit its action too:

- name: Run Chromatic
  uses: chromaui/action@latest
  env:
    NODE_OPTIONS: --max-old-space-size=16384

Disable source maps and minification

In your .storybook/main.js file:

viteFinal: (config) => {
  // Other config...
  config.build = {
    ...config.build,
    sourcemap: false,
    minify: false
  };
  return config;
},