FATAL ERROR when building nuxt: JavaScript heap out of memory

[jrutila]

The bug #158 is still acting up with 1.4.3.

I have a nuxt workspace where adding @nuxt/icon (1.4.3) and adding it to the modules causes nuxt build to fail to the FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory error. If I downgrade to 1.2.0 the error does not happen.

The #158 was reportedly fixed but that code is after that refactored. Could it be broken, again?

[jrutila]

I'm willing to try any patch in my workspace.

[antfu]

Have you installed @iconify/json instead of each collection's own package? In that case, you might need to manually limit the collections you are using in serverBundle.collections

[QaahirStewart]

This was the same as me but hard to reproduce minimal reproduction. Is there any 1st thoughts on what to fix?

Can't Build Production: error Command failed with signal "SIGKILL". on Update to 1.3.1 #215

[honmanyau]

Am new to Nuxt and Vue and bumped into this issue, too! I have been able to reproduce the issue with the latest versions of @nuxt/icon (1.4.3 and 1.4.4), and it seems like adding @iconify/json is the problem with those versions of @nuxt/icon:

# Install dependencies
npx nuxi@latest init nuxt-icon --packageManager=npm --gitInit=no
cd nuxt-icon
npx nuxi module add icon

# Add an icon to app.vue
sed -i '/<NuxtWelcome/c\\t\t<Icon name="bi:sun" />' ./app.vue

# Build should succeed
npm run build # SUCCESS

# Install @iconify/json and observer out of memory error
npm i -D @iconify/json
npm run build # ERROR

# Update nuxt.config.ts to include only the Bootstrap Icons collection.
# The config should look similar to this:
#   export default defineNuxtConfig({
#     compatibilityDate: '2024-04-03',
#     devtools: { enabled: true },
#     modules: ["@nuxt/icon"],
#     icon: {
#       serverBundle: { collections: ["bi"] }
#     },
#   })
sed -i '/devtools: { enabled: true \}/c\  devtools: { enabled: true \},' ./nuxt.config.ts
sed -i '/modules: \["@nuxt\/icon"]/c\  modules: ["@nuxt/icon"],' ./nuxt.config.ts
sed -i '/\})/c\  icon: { collections: ["bi"] },\n}\)' ./nuxt.config.ts

# Build and observe out of memory error 
npm run build # SUCCESS

# Sanity check: remove @iconify/json and building again should succeed
npm uninstall @iconify/json
npm run build # SUCCESS

Additional context that may be useful: I originally came across the problem while I was trying to include some in the client bundle of my project (clientBundle.icons). I initially tried installing @iconify/json when I was looking for a replacement for @iconify-json/collection-name (mentioned in the docs but seems to have been unpublished).

It may be worth noting that I was able to build successfully with client bundling by adding only the specific dependencies I need from @iconify-json (for example @iconify-json/bi). As a related aside, I did try downgrading to 1.2.0 as @jrutila suggested but it seems like client bundling is relatively new and wasn't supported.

Edit: serverBundle.collections does work and I have updated the example above to reflect the mistake in the earlier version of the config.

Edit 2: on the off chance that you do need everything in @iconify/json bundled, I was able to build successfully with NODE_OPTIONS=--max-old-space-size=16384. Not sure what the exact amount of memory required is, but 8192 MB wasn't enough.

[antfu]

I improved the docs a bit to note this situation, please read -> https://github.com/nuxt/icon/commit/cc166d6a24fd9060156db2efb4b33344dfcbcef7

Meanwhile, since 1.4.4, serverBundle.externalizeIconsJson is introduced to also improve this: https://github.com/nuxt/icon/commit/b05b720870654a164f1921211d57107f8e90f69e

[honmanyau]

Thank you, @antfu! Those make sense and I also realised that I specified collections in the wrong place earlier! Have a lovely day and a great weekend in advance! :sunny:

[jrutila]

Can confirm removeing the @iconify/json and installing all the collections one by one (for example @iconify-json/heroicons) fixed this issue.

@antfu should we close this issue now?

[jrutila]

Except it is not working for me, yet. It worked once, I think. I could have had some old version still.

I tried to install the collections one-by-one and set up the serverBundle collections to get it working.

Without the serverBundle setting it gives me this (with @nuxt/icon v1.4.5) and with serverBundle setting it doesn't mention about the local-installed collections. Both break to the heap out of memory.

> nuxt build "--preset" "cli" "--dotenv" ".env.dev"

Nuxt 3.12.4 with Nitro 2.9.7                                                                                                                                                                              13.08.06
ℹ Using Nitro server preset: cli                                                                                                                                                                         13.08.07
ℹ Nuxt Icon server bundle mode is set to local                                                                                                                                                           13.08.09
✔ Nuxt Icon discovered local-installed 4 collections: heroicons, heroicons-outline, heroicons-solid, mdi                                                                                                 13.08.13
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css                                                                                                                                     nuxt:tailwindcss 13.08.13
ℹ Building client...                                                                                                                                                                                     13.08.22
ℹ vite v5.3.5 building for production...                                                                                                                                                                 13.08.22   
transforming (1) ..\node_modules\.pnpm\nuxt@3.12.4_@azure+data-tables@13.2.2_@azure+storage-blob@12.24.0_@parcel+watcher@2.4.1_@type_xl63pojvalqbthpz3h24q27beq\node_modules\nuxt\dist\app\entry.js
<--- Last few GCs --->

[24900:00000210CB260080]   101351 ms: Scavenge 3561.7 (4113.7) -> 3545.9 (4112.4) MB, 11.5 / 0.0 ms  (average mu = 0.091, current mu = 0.068) allocation failure;
[24900:00000210CB260080]   101398 ms: Scavenge 3572.3 (4119.2) -> 3555.9 (4117.0) MB, 10.4 / 0.0 ms  (average mu = 0.091, current mu = 0.068) allocation failure;
[24900:00000210CB260080]   101440 ms: Scavenge 3580.4 (4122.1) -> 3564.5 (4120.6) MB, 10.9 / 0.0 ms  (average mu = 0.091, current mu = 0.068) allocation failure;

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF70C8DD84F node_api_throw_syntax_error+174175
 2: 00007FF70C860DA6 v8::internal::wasm::WasmCode::safepoint_table_offset+59926
 3: 00007FF70C862A40 v8::internal::wasm::WasmCode::safepoint_table_offset+67248
 4: 00007FF70D30D604 v8::Isolate::ReportExternalAllocationLimitReached+116
 5: 00007FF70D2F8992 v8::Isolate::Exit+674
 6: 00007FF70D17A87C v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
 7: 00007FF70D187B5D v8::internal::Heap::PublishPendingAllocations+1117
 8: 00007FF70D184BE7 v8::internal::Heap::PageFlagsAreConsistent+3367
 9: 00007FF70D177317 v8::internal::Heap::CollectGarbage+2039
10: 00007FF70D18DCD3 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
11: 00007FF70D18E57D v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
12: 00007FF70D196EAF v8::internal::Factory::AllocateRaw+783
13: 00007FF70D1AA0B9 v8::internal::FactoryBase<v8::internal::Factory>::NewHeapNumber<0>+233
14: 00007FF70D1AE5C8 v8::internal::FactoryBase<v8::internal::Factory>::NewRawOneByteString+72
15: 00007FF70CF55AF7 v8::internal::String::SlowFlatten+679
16: 00007FF70CEA0E3F v8::internal::RegExp::ExperimentalOneshotExec+1343
17: 00007FF70CEA0848 v8::internal::RegExp::Exec+216
18: 00007FF70CE7E732 v8::internal::DeclarationScope::was_lazily_parsed+22994
19: 00007FF70D3AB501 v8::internal::SetupIsolateDelegate::SetupHeap+558257
20: 00007FF70D40E71E v8::internal::SetupIsolateDelegate::SetupHeap+964302
21: 00007FF68D923A9D
 ELIFECYCLE  Command failed with exit code 134.

[jrutila]

I tried the externalizeIconsJson but in vain. My nuxt.config.ts relevant part is this:

  icon: {
    serverBundle: {
      collections: ["heroicons", "heroicons-outline", "heroicons-solid", "mdi"],
      externalizeIconsJson: true,
    },
  }

[jrutila]

At this moment I have disabled the serverBundle. It is now building locally and in my CI. I noticed I had a .npmrc file with following content:

shamefully-hoist=true
strict-peer-dependencies=false

I tried removing that file, and re-installed deps, and then the error came back! After I re-installed everything with the .npmrc file in place, the build works, again. I am using pnpm and I have a mono-repo.

[genu]

I can confirm this issue as well. If you have a large iconset json, it will cause the memory issue.

See https://github.com/iconify/iconify/issues/326

fluent-emoji for example, is a very big icon set and will almost always throw a memory fault.

this solves the issue for me:

   serverBundle: {
      externalizeIconsJson: true,
    },