build-storybook runs out of memory in Github Actions.

After switching from CRA / webpack@5, to vitejs and storybook-builder-vite I noticed my storybook takes a lot longer than usual to build. (I was expecting the opposite.)

It’s not the end of the world of course, but a bigger problem / sideeffect of this is that my Github action that builds storybook and publishes to Chromatic fails with a JavaScript heap out of memory error.

My storybook build on my local machine (M1 Max) takes 60.05s, here is the log for that:

$ STORYBOOK=true build-storybook -s public
info @storybook/react v6.5.0-alpha.49
info
info => Cleaning outputDir: /Users/marklyck/colony/colony-frontend/storybook-static
(node:72756) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Copying static files: ./public => ./
info => Compiling manager..
vite v2.8.6 building for production...
transforming (1925) src/test/mocks/resource/utils.tsinfo => Manager built (25 s)
transforming (7413) node_modules/lodash-es/_arrayPush.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
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
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
✓ 7455 modules transformed.
rendering chunks (4)...Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
rendering chunks (20)...Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
rendering chunks (24)...Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:react-docgen-typescript) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
rendering chunks (25)...rollup-plugin-turbosnap: writing to /Users/marklyck/colony/colony-frontend/storybook-static/preview-stats.json
storybook-static/iframe.html                                          12.46 KiB
storybook-static/assets/useSiteDisplayMapping.250684a7.js             1.81 KiB / gzip: 0.69 KiB
storybook-static/assets/useSiteDisplayMapping.250684a7.js.map         4.68 KiB
storybook-static/assets/index.8ace584c.js                             2.40 KiB / gzip: 1.18 KiB
storybook-static/assets/index.8ace584c.js.map                         5.91 KiB
storybook-static/assets/useGetList.a5ab71ca.js                        0.43 KiB / gzip: 0.30 KiB
storybook-static/assets/useGetList.a5ab71ca.js.map                    1.72 KiB
storybook-static/assets/index.0068c667.js                             7.32 KiB / gzip: 2.93 KiB
storybook-static/assets/index.0068c667.js.map                         14.63 KiB
storybook-static/assets/index.5198709f.js                             4.07 KiB / gzip: 1.83 KiB
storybook-static/assets/index.5198709f.js.map                         10.15 KiB
storybook-static/assets/Edit.4f5fcdb2.js                              1.30 KiB / gzip: 0.70 KiB
storybook-static/assets/Edit.4f5fcdb2.js.map                          3.11 KiB
storybook-static/assets/Create.88c88e80.js                            0.94 KiB / gzip: 0.51 KiB
storybook-static/assets/Create.88c88e80.js.map                        1.64 KiB
storybook-static/assets/index.f3ee7d6c.js                             58.00 KiB / gzip: 15.80 KiB
storybook-static/assets/index.f3ee7d6c.js.map                         151.87 KiB
storybook-static/assets/DeviceForm.f4af71bb.js                        2.36 KiB / gzip: 1.23 KiB
storybook-static/assets/DeviceForm.f4af71bb.js.map                    5.96 KiB
storybook-static/assets/DnsServiceForm.215238fe.js                    1.90 KiB / gzip: 0.99 KiB
storybook-static/assets/DnsServiceForm.215238fe.js.map                3.69 KiB
storybook-static/assets/ProbeForm.5993e6cd.js                         3.56 KiB / gzip: 1.43 KiB
storybook-static/assets/ProbeForm.5993e6cd.js.map                     9.39 KiB
storybook-static/assets/renderDocs.3259c4d1.js                        2.38 KiB / gzip: 1.13 KiB
storybook-static/assets/renderDocs.3259c4d1.js.map                    8.10 KiB
storybook-static/assets/GlobalScrollAreaStyles-8793ce4a.ed7ed242.js   10.05 KiB / gzip: 2.24 KiB
storybook-static/assets/GlobalScrollAreaStyles-8793ce4a.ed7ed242.js.map 18.81 KiB
storybook-static/assets/index.8757582e.css                            0.84 KiB / gzip: 0.26 KiB
storybook-static/assets/Color-bd072a46.408c7b66.js                    32.87 KiB / gzip: 12.25 KiB
storybook-static/assets/Color-bd072a46.408c7b66.js.map                128.38 KiB
storybook-static/assets/WithTooltip-5ca86264.933d24fa.js              37.76 KiB / gzip: 12.46 KiB
storybook-static/assets/WithTooltip-5ca86264.933d24fa.js.map          173.66 KiB
storybook-static/assets/OverlayScrollbars-36e5fb0c.0695420d.js        58.04 KiB / gzip: 24.89 KiB
storybook-static/assets/OverlayScrollbars-36e5fb0c.0695420d.js.map    427.40 KiB
storybook-static/assets/syntaxhighlighter-d559b1c8.4ae9d8d5.js        74.19 KiB / gzip: 26.82 KiB
storybook-static/assets/syntaxhighlighter-d559b1c8.4ae9d8d5.js.map    290.59 KiB
storybook-static/assets/index.4a92d4da.js                             117.10 KiB / gzip: 31.73 KiB
storybook-static/assets/index.4a92d4da.js.map                         491.07 KiB
storybook-static/assets/Content.25dc197a.js                           104.85 KiB / gzip: 31.73 KiB
storybook-static/assets/Content.25dc197a.js.map                       500.66 KiB
storybook-static/assets/main.bfbc352d.js                              115.24 KiB / gzip: 33.64 KiB
storybook-static/assets/main.bfbc352d.js.map                          242.10 KiB
storybook-static/assets/index.09db6c10.js                             109.25 KiB / gzip: 34.84 KiB
storybook-static/assets/index.09db6c10.js.map                         286.93 KiB
storybook-static/assets/index.becca599.js                             436.12 KiB / gzip: 129.63 KiB
storybook-static/assets/index.becca599.js.map                         1567.08 KiB
storybook-static/assets/index.b6c42f98.js                             489.04 KiB / gzip: 146.67 KiB
storybook-static/assets/index.b6c42f98.js.map                         1126.33 KiB
storybook-static/assets/iframe.094305ea.css                           1150.60 KiB / gzip: 149.64 KiB
storybook-static/assets/iframe.ddcac7c1.js                            1648.40 KiB / gzip: 180.03 KiB
storybook-static/assets/iframe.ddcac7c1.js.map                        2734.54 KiB
storybook-static/assets/vendor.276316db.js                            5455.60 KiB / gzip: 1498.63 KiB
storybook-static/assets/vendor.276316db.js.map                        29656.80 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
info => Output directory: /Users/marklyck/colony/colony-frontend/storybook-static
✨  Done in 60.05s.

with CRA / webpack@5 it took 49.49s to build and did not have source map errors 🤔 (maybe that’s the culprit)

Here is the output of the same project but with webpack@5 build-storybook

$ STORYBOOK=true build-storybook -s public
info @storybook/react v6.5.0-alpha.49
info
info => Cleaning outputDir: /Users/marklyck/colony/colony-frontend/storybook-static
(node:73005) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Copying static files: ./public => ./
info => Compiling manager..
info => Compiling preview..
info Addon-docs: using MDX1
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Loading custom Webpack config (full-control mode).
23% building 1/15 entries 10200/10452 dependencies 1249/2776 modulesinfo => Manager built (11 s)
info => Preview built (47 s)
WARN 971.b9c99552.iframe.bundle.js is 7.87 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN   main.d8acc906.iframe.bundle.js (2.01 MiB)
WARN   399.18b95e79.iframe.bundle.js (519 KiB)
WARN   static/css/971.25a6a32b.css (759 KiB)
WARN   971.b9c99552.iframe.bundle.js (7.5 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (10.3 MiB)
WARN       runtime~main.e7c72ae8.iframe.bundle.js
WARN       static/css/971.25a6a32b.css
WARN       971.b9c99552.iframe.bundle.js
WARN       main.d8acc906.iframe.bundle.js
WARN
info => Output directory: /Users/marklyck/colony/colony-frontend/storybook-static
✨  Done in 49.49s.

But the main problem is that when I try to build my storybook in a Github action, it runs out of memory, which means I can’t use chromatic at all.

This is what my Github action looks like:

name: 'Chromatic'

on: push

jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Restore node_modules cache
        uses: actions/cache@v2
        with:
          path: '**/node_modules'
          key: node_modules-${{ hashFiles('**/yarn.lock') }}
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        # Chromatic GitHub Action options
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          exitOnceUploaded: true
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

and here is the output of running the action:

Chromatic CLI v6.5.3
https://www.chromatic.com/docs/cli

Authenticating with Chromatic
    → Connecting to https://index.chromatic.com
Authenticated with Chromatic
    → Using project token '*******lf6l'
Retrieving git information
Found 8 changed files:
  .github/workflows/chromatic.yml
  

  .storybook/main.ts
  .storybook/preview-body.html
  .storybook/preview.ts
  package.json
  yarn.lock
Retrieved git information
    → Commit 'fd43339' on branch 'vite-storybook'; found 1 parent build and 8 changed files
Collecting Storybook metadata
Collected Storybook metadata
    → ; no supported addons found
Building your Storybook
    → Running command: npm run --silent build-storybook -- --output-dir /tmp/chromatic--1793-Q7ZOg74Tk9jA --webpack-stats-json /tmp/chromatic--1793-Q7ZOg74Tk9jA
The CLI tried to run your build-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:

- Check the Storybook build log printed below.
- Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
- Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook

Command failed with exit code 134: npm run --silent build-storybook -- --output-dir /tmp/chromatic--1793-Q7ZOg74Tk9jA --webpack-stats-json /tmp/chromatic--1793-Q7ZOg74Tk9jA

ℹ Spawn settings:
{
  "client": "npm",
  "clientVersion": "8.3.1",
  "nodeVersion": "v16.14.0",
  "platform": "linux",
  "command": "npm",
  "clientArgs": [
    "run",
    "--silent"
  ],
  "scriptArgs": [
    "build-storybook",
    "--",
    "--output-dir",
    "/tmp/chromatic--1793-Q7ZOg74Tk9jA",
    "--webpack-stats-json",
    "/tmp/chromatic--1793-Q7ZOg74Tk9jA"
  ]
}

ℹ Storybook build output:
/home/runner/work/colony-frontend/colony-frontend/build-storybook.log

info @storybook/react v6.5.0-alpha.49
info 
info => Cleaning outputDir: /tmp/chromatic--1793-Q7ZOg74Tk9jA
(node:1867) DeprecationWarning: --static-dir CLI flag is deprecated, see:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Copying static files: ./public => ./
info => Compiling manager..
vite v2.8.6 building for production...
transforming...
<--- Last few GCs --->
[1867:0x5944b10]   114374 ms: Mark-sweep 2023.5 (2085.7) -> 2008.7 (2086.7) MB, 2050.1 / 0.1 ms  (average mu = 0.[12](https://github.com/colonynetworks/colony-frontend/runs/5593183873?check_suite_focus=true#step:5:12)2, current mu = 0.064) allocation failure scavenge might not succeed
[1867:0x5944b10]   116576 ms: Mark-sweep 2025.1 (2087.2) -> 2009.8 (2088.0) MB, 1799.0 / 0.1 ms  (average mu = 0.[15](https://github.com/colonynetworks/colony-frontend/runs/5593183873?check_suite_focus=true#step:5:15)2, current mu = 0.183) allocation failure scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb09980 node::Abort() [node]
 2: 0xa1c235 node::FatalError(char const*, char const*) [node]
 3: 0xcf77be v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xcf7b37 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xeaf3d5  [node]
 6: 0xeafeb6  [node]
 7: 0xebe3de  [node]
 8: 0xebee20 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xec1d9e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
10: 0xe832da v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
11: 0x11fc026 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
12: 0x15f0a99  [node]
Aborted (core dumped)
    → Command failed: npm run --silent build-storybook -- --output-dir /tmp/chromatic--[17](https://github.com/colonynetworks/colony-frontend/runs/5593183873?check_suite_focus=true#step:5:17)93-Q7ZOg[74](https://github.com/colonynetworks/colony-frontend/runs/5593183873?check_suite_focus=true#step:5:74)Tk9jA --webpack-stats-json /tmp/chromatic--1[79](https://github.com/colonynetworks/colony-frontend/runs/5593183873?check_suite_focus=true#step:5:79)3-Q7ZOg74Tk9jA

Error: non-zero exit code

I tried both with and without https://github.com/IanVS/vite-plugin-turbosnap

[IanVS]

I noticed my storybook takes a lot longer than usual to build. (I was expecting the opposite.)

Vite is definitely fast in development (esbuild, no bundler), but when it builds for production, it uses rollup, which does a lot of work to bundle and treeshake, so it does take some time. That said, you shouldn’t be running out of memory. You can try increasing the amount available to node with a top-level env key in your workflow:

env:
  # 7 GiB by default on GitHub, setting to 6 GiB
  # https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#supported-runners-and-hardware-resources
  NODE_OPTIONS: --max-old-space-size=6144

As for the sourcemap errors, I think the reason you don’t see the output/errors is that chromatic builds storybook with a --silent flag, (npm run --silent build-storybook -- --output-dir /tmp/chromatic--1793-Q7ZOg74Tk9jA --webpack-stats-json /tmp/chromatic--1793-Q7ZOg74Tk9jA). You can build the storybook in a previous step in your workflow, and then pass the directory to the chromatic action, if you’d prefer to see the output.

I’ve opened https://github.com/joshwooding/vite-plugin-react-docgen-typescript/issues/1 to explore adding sourcemap support to that plugin.

[IanVS]

@alextompkins are you able to give node a bit extra memory? Github runners have 7gb or so available, it’s normally safe to increase the --max-old-space-size.