build-storybook runs out of memory in Github Actions. #282

MarkLyck · 2022-03-17T23:03:20Z

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

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

IanVS · 2022-03-18T14:17:54Z

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 joshwooding/vite-plugin-react-docgen-typescript#1 to explore adding sourcemap support to that plugin.

MarkLyck · 2022-03-18T17:28:16Z

@IanVS Thanks for the quick answer again :)

Adding the --max-old-space-size to the action did get my chromatic GitHub action passing now. 🎉

Although I do wonder if it's really supposed to be using that much more memory with vite than with webpack?

Sadly I seem to also have run into more problems and inconsistencies with the production built storybook vs the dev storybook. But that's unrelated to this memory issue.

Thanks again for the help! and for opening that ticket in the react-docgen plugin.

IanVS · 2022-03-18T17:29:28Z

Sadly I seem to also have run into more problems and inconsistencies with the production built storybook vs the dev storybook

I'd love to hear more about this, if you don't mind opening another issue or jumping into the #vite channel in the storybook discord.

MarkLyck · 2022-03-18T17:36:16Z

@IanVS let me have a crack at it first :) but yeah I'll join the discord or create a ticket if I can't solve it.

MarkLyck · 2022-03-18T17:50:02Z

@IanVS Yeah. The last few inconsistencies were due to environment variables not being picked up when building production vs building development.

Now the only things left to "solve" are why my vite storybook is so slow, and the source maps you already created another issue for.

It's not just the production build that's slow for me. But the development build can sometimes take over a minute to start up as well. (on my M1 max) I'm not sure why yet. dev mode started faster with CRA. But that's likely something specific to my project I'd imagine.

I have another smaller project where vitejs storybook starts much faster than the CRA version.

IanVS · 2022-03-18T17:57:11Z

That's definitely strange. Vite can take some time to load in the browser in dev mode, but the dev server should start within a few seconds. My own storybook has 115 story files and nearly 500 stories, and it starts up in 10 seconds on my intel mac. Feel free to hop into the discord if you want to chat more about it.

IanVS · 2022-03-25T13:18:38Z

It seems like maybe this is a known vite issue: vitejs/vite#2433

alextompkins · 2022-07-26T03:48:12Z

Just wanted to bump this thread to note that I'm experiencing this issue too. I can run build-storybook fine on my local machine, but when I push it up GitHub actions isn't able to cope:

info @storybook/react v6.5.9
info 
info => Cleaning outputDir: /tmp/chromatic--1674-kAg7sLbcOrpG
info => Loading presets
info Found existing addon "@storybook/addon-actions", skipping.
info => Compiling manager..
vite v3.0.2 building for production...
transforming...
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
Error when using sourcemap for reporting an error: Can't resolve original location of error.
Non-existent export '__exports' is imported from {{MY_PROJECT}}/node_modules/core-js/modules/es.object.get-own-property-descriptors.js?commonjs-exports
✓ 2515 modules transformed.
Generated an empty chunk: "react-dom-client-placeholder"
rendering chunks...
<--- Last few GCs --->
[1738:0x5a89770]    92911 ms: Scavenge 2023.5 (2077.0) -> 2021.0 (2078.3) MB, 18.3 / 0.0 ms  (average mu = 0.321, current mu = 0.293) allocation failure 
[1738:0x5a89770]    92966 ms: Scavenge 2024.9 (2078.5) -> 2023.2 (2082.8) MB, 35.4 / 0.0 ms  (average mu = 0.321, current mu = 0.293) allocation failure 
[1738:0x5a89770]    93404 ms: Scavenge 2028.8 (2082.8) -> 2024.7 (2100.3) MB, 406.2 / 0.0 ms  (average mu = 0.321, current mu = 0.293) allocation failure 
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb0a860 node::Abort() [node]
 2: 0xa1c193 node::FatalError(char const*, char const*) [node]
 3: 0xcf9a6e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xcf9de7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xeb1685  [node]
 6: 0xec134d v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 7: 0xec404e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
 8: 0xe8558a v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
 9: 0x11fe2d6 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
10: 0x15f2d39  [node]
Aborted (core dumped)

I'm using:

vite: 3.0.2
@storybook/builder-vite: 0.2.0
@vitejs/plugin-react: 2.0.0

IanVS · 2022-07-26T05:03:46Z

@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.

alextompkins · 2022-07-26T05:57:36Z

@IanVS yup that did the trick. Still seems odd that vite would need >1.4GB but 🤷

IanVS · 2022-07-26T12:35:57Z

Yeah, I've spent some time trying to understand what's going on and why it is using so much, without any luck so far.

kjpluck · 2023-06-20T04:27:11Z

Have found myself at the bottom of this thread after cranking up max_old_space_size on a github runner to 64gig with no luck although the error is now "Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" instead of "Reached heap limit Allocation failed - JavaScript heap out of memory" which happened at 32gig.

Our storybook contains 36 components if that gives a sense of scale.

We can build locally so may just do that every-so-often but would be nice to automate this :-)

It would be great if you have any suggestions!

AngusMacrae · 2023-10-19T13:55:44Z

Having the same problem as above after moving from webpack to vite. The build-storybook command runs fine locally on my laptop with both, and node max_old_space_size set to 4096. But with vite it fails on CI (we are using Azure DevOps) even with max_old_space_size set to 32768.

I've done some investigating and found that if I set typescript.reactDocgen in main.ts to false then the problem goes away. But we need the docgen, and also I don't understand why it works fine with webpack but not with the vite builder. And more importantly, why does it work with vite builder locally but not on CI?

IanVS · 2023-10-19T14:56:44Z

It's possible that your github runners themselves do not have sufficient RAM. You may need more powerful boxes.

The reason it happens with vite and not webpack is due to vite using rollup to build. This is the vite issue: vitejs/vite#2433.

MarkLyck closed this as completed Mar 18, 2022

IanVS mentioned this issue Jul 29, 2022

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

Open

1 task

c-py mentioned this issue Feb 9, 2023

[FIX] Increase max RAM for build process sunflower-land/sunflower-land#2208

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build-storybook runs out of memory in Github Actions. #282

build-storybook runs out of memory in Github Actions. #282

MarkLyck commented Mar 17, 2022

IanVS commented Mar 18, 2022 •

edited

MarkLyck commented Mar 18, 2022

IanVS commented Mar 18, 2022

MarkLyck commented Mar 18, 2022

MarkLyck commented Mar 18, 2022

IanVS commented Mar 18, 2022

IanVS commented Mar 25, 2022

alextompkins commented Jul 26, 2022

IanVS commented Jul 26, 2022

alextompkins commented Jul 26, 2022

IanVS commented Jul 26, 2022

kjpluck commented Jun 20, 2023

AngusMacrae commented Oct 19, 2023

IanVS commented Oct 19, 2023

build-storybook runs out of memory in Github Actions. #282

build-storybook runs out of memory in Github Actions. #282

Comments

MarkLyck commented Mar 17, 2022

IanVS commented Mar 18, 2022 • edited

MarkLyck commented Mar 18, 2022

IanVS commented Mar 18, 2022

MarkLyck commented Mar 18, 2022

MarkLyck commented Mar 18, 2022

IanVS commented Mar 18, 2022

IanVS commented Mar 25, 2022

alextompkins commented Jul 26, 2022

IanVS commented Jul 26, 2022

alextompkins commented Jul 26, 2022

IanVS commented Jul 26, 2022

kjpluck commented Jun 20, 2023

AngusMacrae commented Oct 19, 2023

IanVS commented Oct 19, 2023

IanVS commented Mar 18, 2022 •

edited