[Vite] Chromatic github action - JavaScript heap out of memory

[MarkLyck]

I am trying to get my Chromatic github action to work, but no matter what I try it always runs out of memory.

This is my workflow chromatic.yml file:

name: 'Chromatic'

on: push

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

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0 # 👈 Required to retrieve git history
      - 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
        # 👇 Adds Chromatic as a step in the workflow
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        # Chromatic GitHub Action options
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          exitOnceUploaded: true
          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

and here is the output when running in github actions:

Run chromaui/action@v1

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/TESTpreview.ts
  .storybook/main.ts
  .storybook/preview-body.html
  .storybook/preview.ts
  package.json
  yarn.lock
Retrieved git information
    → Commit 'd68236d' 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--2010-6eZ[7](https://github.com/colonynetworks/colony-frontend/runs/5594823949?check_suite_focus=true#step:5:7)EAyyGic9 --webpack-stats-json /tmp/chromatic--2010-6eZ7EAyyGic9
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--2010-6eZ7EAyyGic9 --webpack-stats-json /tmp/chromatic--2010-6eZ7EAyyGic9

ℹ Spawn settings:
{
  "client": "npm",
  "clientVersion": "[8](https://github.com/colonynetworks/colony-frontend/runs/5594823949?check_suite_focus=true#step:5:8).3.1",
  "nodeVersion": "v16.14.0",
  "platform": "linux",
  "command": "npm",
  "clientArgs": [
    "run",
    "--silent"
  ],
  "scriptArgs": [
    "build-storybook",
    "--",
    "--output-dir",
    "/tmp/chromatic--2010-6eZ7EAyyGic[9](https://github.com/colonynetworks/colony-frontend/runs/5594823949?check_suite_focus=true#step:5:9)",
    "--webpack-stats-json",
    "/tmp/chromatic--20[10](https://github.com/colonynetworks/colony-frontend/runs/5594823949?check_suite_focus=true#step:5:10)-6eZ7EAyyGic9"
  ]
}

ℹ 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--2010-6eZ7EAyyGic9
(node:2077) 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 --->
[2077:0x590db10]   105493 ms: Scavenge (reduce) 2034.1 (2080.1) -> 2033.3 (2080.1) MB, 12.5 / 0.0 ms  (average mu = 0.161, current mu = 0.002) allocation failure 
[2077:0x590db10]   105524 ms: Scavenge (reduce) 2034.6 (2080.1) -> 2034.0 (2080.3) MB, 4.6 / 0.0 ms  (average mu = 0.161, current mu = 0.002) allocation failure 
[2077:0x590db10]   105565 ms: Scavenge (reduce) 2036.5 (2081.8) -> 2036.5 (2082.6) MB, 10.9 / 0.0 ms  (average mu = 0.161, current mu = 0.002) allocation failure 
<--- 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](https://github.com/colonynetworks/colony-frontend/runs/5594823949?check_suite_focus=true#step:5:11): 0x11fc026 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
[12](https://github.com/colonynetworks/colony-frontend/runs/5594823949?check_suite_focus=true#step:5:12): 0x[15](https://github.com/colonynetworks/colony-frontend/runs/5594823949?check_suite_focus=true#step:5:15)f0a99  [node]
Aborted (core dumped)
    → Command failed: npm run --silent build-storybook -- --output-dir /tmp/chromatic--[20](https://github.com/colonynetworks/colony-frontend/runs/5594823949?check_suite_focus=true#step:5:20)10-6eZ7EAyyGic9 --webpack-stats-json /tmp/chromatic--2010-6eZ7EAyyGic9




Error: non-zero exit code

When I build my storybook locally it builds just fine in about ~60s.

If I run chromatic-cli locally it always works just fine. It is only in GitHub actions it fails with this error.

My storybook is not even that big either, I have around 40 stories 🤷‍♂️

Here is my .storybook/main.ts file:

const path = require('path')

module.exports = {
  framework: '@storybook/react',
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-addon-themes',
    'storybook-addon-i18next',
  ],
  core: {
    builder: 'storybook-builder-vite',
  },
  features: {
    storyStoreV7: false,
  },
  async viteFinal(config) {

    config.resolve.alias = [
      {
        find: /^react-mapbox-gl/,
        replacement: 'react-mapbox-gl/lib',
      },
      {
        find: /^src/,
        replacement: path.resolve(__dirname, '../src/'),
      },
    ]

    config.css = {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    }

    return config
  },
}

[tmeasday]

@MarkLyck 60s is quite a long time to build a Storybook, especially one so small. I don't have a lot of experience with the Vite builder so cannot say for sure, but I wonder if something is unusual with your setup to make that happen? Can you try simplifying to see what might be causing it?

[ekilah]

We have a much larger storybook that gets OOM errors in our CI environment. This has happened more frequently more recently, I believe we've probably been slowly approaching these limits for a while:

So re: the original question, I'm also curious if memory usage is configurable here, with something similar to Node's --max-old-space-size for example?

[marjan-pluto]

We started encountering this issue today and our stories can no longer be published via Github Actions.

[nodesmichael]

We are also having intermittent memory issues. We use github actions which I think only provides 7GB and we build using nrwl's storybook builder. We've been using it for a while without any issues, but I guess we've been ramping up usage the past couple of weeks.

[moritzjacobs]

Same here, we have ~70 stories and use @storybook/builder-vite. Any ideas?

[tmeasday]

Can folks let us know a couple of things when reporting problems here:

• Do you see the same issue when running build-storybook directly in on your CI server? [1]
• Which builder are you using? It sounds like builder-vite is a common thread here, and we'll investigate that.

[1] If it isn't a problem when building directly, that's super interesting, but also you might as a workaround just do that and pass the result into chromatic.

[moritzjacobs]

Do you see the same issue when running build-storybook directly in on your CI server [1]

Sorry, I could have specified: we are using github actions as well. This helped:

env:
  # 7 GiB by default on GitHub, setting this to 16 GiB
  NODE_OPTIONS: --max-old-space-size=16384

[yannbf]

Hey peeps! Could you share the versions of vite and @storybook/builder-vite? Thanks!

[moritzjacobs]

Hey peeps! Could you share the versions of vite and @storybook/builder-vite? Thanks!

@storybook/[email protected]and [email protected]

Thanks for your support!

[originalwebgurl]

@tmeasday Started seeing this error in our project a few days ago and finally had some time to investigate it a bit today.

Relevant versions Storybook 6.5.6 @storybook/builder-vite 1.3.6 vite 2.9.13

I then upgraded to: Storybook 6.5.9 @storybook/builder-vite 0.2.0 vite 3.0.2

Still getting the same error.

When I run build-storybook locally I noticed a chunk size warning and some very large files... vendor.js especially

I modified our /.storybook/main.js to chunk some of the obvious vendor libs (took my best guess at some of the sb deps: lodash & react), and am also turning of sourcemap generation temporarily. It's a bit messy as I'm still trying to figure out the best chunking strategy, but hopefully this will help some others with this issue.

// .storybook/main.js

const { mergeConfig, splitVendorChunkPlugin } = require("vite");
const { resolve } = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: "@storybook/vue3",
  core: {
    builder: "@storybook/builder-vite",
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  async viteFinal(config, { configType }) {
    // TRY to reduce file sizes for SB to avoid GA chromatic deploy failure
    //const usePlugins = [];
    if (configType === "PRODUCTION") {
      //usePlugins.push(splitVendorChunkPlugin());
      // temporarily bumping up chunk size until we can figure out what's bloating this for SB
      // config.build.chunkSizeWarningLimit = 15000;
      config.build.sourcemap = false;
    }
    // return the customized config
    return mergeConfig(config, {
      // customize the vite config here
      //plugins: usePlugins,
      build: {
        rollupOptions: {
          output: {
            manualChunks: {
              lodash: ["lodash"],
              vue: ["vue"],
              react: ["react"],
              "element-plus": ["element-plus"],
              // storybook: ["storybook"], // breaks ALL THE THINGS
              // webpack: ["webpack"], // also breaks ALL THE THINGS
              // probably more SB deps should be added here...
            },
          },
        },
      },
      resolve: {
        alias: {
          "@": resolve(__dirname, "/src"),
          "~": resolve(__dirname, "/src"),
        },
      },
    });
  },
};

I'm no longer seeing the memory error in GA and am able to deploy to Chromatic again but there is still a very large file in the sb exports iframe.js that generates a chunk size warning.

Not sure if this is a SB, Chromatic or vite issue but I suspect it may be related to https://github.com/storybookjs/builder-vite/issues/409.

[penx]

We're having an "allocation failure" when chromaui/action@v1 builds a react storybook and I noticed a similarity in the build logs:

Building your Storybook
    → Running command: npm run --silent build-storybook -- --output-dir ...
...
ℹ Spawn settings:
{
  "client": "npm",

We're using yarn, as is the original report above, but the action is running npm.

Should chromatic-cli be detecting and using yarn? I don't see a way to manually specify the client.

[codykaup]

Hey @penx! 👋

The CLI uses yarn-or-npm to figure out if the project is using yarn or not. It should follow this workflow:

1. yarn.lock file is in the nearest package directory - yarn
2. package-lock.json file is in the nearest package directory - npm
3. yarn is installed - yarn
4. Fallback - npm

Does your project maybe have a package-lock.json file that's causing it to return npm as your package manager?

[penx]

Does your project maybe have a package-lock.json file that's causing it to return npm as your package manager?

No, we have a single yarn.lock at the monorepo root and no package-lock.json files.

We seem to have got past the memory issues after further runs, but the action is still using npm at this step.

If I run yarn chromatic --dry-run -t <token> --force-rebuild --debug locally, it shows

Using spawnParams: {
  "client": "yarn",`.

However, if I run npx chromatic --dry-run -t <token> --force-rebuild --debug locally, it shows

Using spawnParams: {
  "client": "npm",

(I appreciate this may be unrelated to this issue, let me know if you want me to raise a new one!)

[geisterfurz007]

Forwarding from a related issue, disabling sourcemaps for the build serves as a workaround until this is fixed in vite.

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

[yannbf]

Hey peeps! This really is an issue with Vite itself, and until it's solved the @storybook/builder-vite package can't do much. This is not a Chromatic issue, though it affect users that use Storybook + Vite and deploy their Storybooks to Chromatic.

I also wanted to add that sourcemaps are set to true by the @storybook/addon-coverage, so in case you are experiencing such issue that could be the reason.

Hopefully the Vite (or Rollup) maintainers will track the issue down and come up with a fix as soon as they can!