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

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
  },
}

[marjan-pluto]

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

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