Build error: JavaScript heap out of memory

Summary

Hi, I have troubles building a Vue project that has the zkbob-client-js package for either Vite or Vue-CLI environments.

The error that occurs when running npm run build is:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Any ideas how to solve this issue? Or should I wait for the library to be optimized?

Complete stacktrace

The whole error stacktrace is this:

vite v5.0.10 building for production...
node_modules/@scure/base/lib/esm/index.js (349:33) A comment

"/* @__PURE__ */"

in "node_modules/@scure/base/lib/esm/index.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
transforming (2252) node_modules/@graphql-tools/batch-delegate/node_modules/@graphql-tools/delegate/esm/getDocumentMetadata.js
<--- Last few GCs --->

[88273:0x118008000]    47899 ms: Mark-Compact 4030.7 (4131.9) -> 4019.3 (4134.1) MB, 830.75 / 0.04 ms  (average mu = 0.163, current mu = 0.074) task; scavenge might not succeed
[88273:0x118008000]    48834 ms: Mark-Compact 4033.7 (4134.1) -> 4021.9 (4136.4) MB, 862.29 / 0.04 ms  (average mu = 0.121, current mu = 0.078) task; scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x1026070cc node::Abort() [/opt/homebrew/Cellar/node/20.6.1/bin/node]
 2: 0x102608528 node::ModifyCodeGenerationFromStrings(v8::Local<v8::Context>, v8::Local<v8::Value>, bool) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
 3: 0x102772fa4 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
 4: 0x102772f50 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
 5: 0x1028fd6b4 v8::internal::Heap::CallGCPrologueCallbacks(v8::GCType, v8::GCCallbackFlags, v8::internal::GCTracer::Scope::ScopeId) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
 6: 0x102900318 v8::internal::Heap::ComputeMutatorUtilization(char const*, double, double) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
 7: 0x1028fe358 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::internal::GarbageCollectionReason, char const*) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
 8: 0x1028fc1d0 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
 9: 0x10294a850 v8::internal::MinorGCJob::Task::RunInternal() [/opt/homebrew/Cellar/node/20.6.1/bin/node]
10: 0x10266d71c node::PerIsolatePlatformData::RunForegroundTask(std::__1::unique_ptr<v8::Task, std::__1::default_delete<v8::Task>>) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
11: 0x10266d42c node::PerIsolatePlatformData::FlushForegroundTasksInternal() [/opt/homebrew/Cellar/node/20.6.1/bin/node]
12: 0x1051e6994 uv__async_io [/opt/homebrew/Cellar/libuv/1.46.0/lib/libuv.1.dylib]
13: 0x1051f6294 uv__io_poll [/opt/homebrew/Cellar/libuv/1.46.0/lib/libuv.1.dylib]
14: 0x1051e6e28 uv_run [/opt/homebrew/Cellar/libuv/1.46.0/lib/libuv.1.dylib]
15: 0x102535994 node::SpinEventLoopInternal(node::Environment*) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
16: 0x10264c2b0 node::NodeMainInstance::Run(node::ExitCode*, node::Environment*) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
17: 0x10264c004 node::NodeMainInstance::Run() [/opt/homebrew/Cellar/node/20.6.1/bin/node]
18: 0x1025d020c node::Start(int, char**) [/opt/homebrew/Cellar/node/20.6.1/bin/node]
19: 0x1897d3f28 start [/usr/lib/dyld]
zsh: abort      npm run build

Steps to reproduce

Create a new Vue project as defined in Vue docs:

npm create vue@latest

In the installation wizard select "No" for everything, so that you get the most light-weight starting point.

Install npm packages:

npm install

Install zkBob library (and vite polyfills):

npm i zkbob-client-js vite-plugin-node-polyfills

vite-plugin-node-polyfills library is just to avoid the process is not defined error because vite does not have support for process (or Buffer). The memory leak error occurs also without the vite-plugin-node-polyfills library, so it's irrelevant.

Import zkBob library in src/App.vue:

<script setup>
import { ZkBobClient } from 'zkbob-client-js';
//...

Add polyfills into vite.config.js:

import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    nodePolyfills(),
  ],
//...

Run in dev mode (should work):

npm run dev

Build the project (ERROR):

npm run build

Step 7 is where the heap error occurs. Same error happens using Yarn instead of npm.

Increasing the allocated RAM

I tried increasing RAM allocated to Node using NODE_OPTIONS=--max-old-space-size=18000:

export NODE_OPTIONS=--max-old-space-size=18000
npm run build

When I increased it to 18GB, the heap error did not occur anymore, but another memory leak error appeared (what(): std::bad_alloc):

vite v5.0.10 building for production...
node_modules/@scure/base/lib/esm/index.js (349:33) A comment

"/* @__PURE__ */"

in "node_modules/@scure/base/lib/esm/index.js" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.

transforming (1672) node_modules/crypto-browserify/index.jsterminate called after throwing an instance of 'std::bad_alloc'
  what():  std::bad_alloc
Aborted

zkBob / zkbob-client-js