FATAL ERROR when building nuxt: JavaScript heap out of memory
Opened this issue · 11 comments
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?
I'm willing to try any patch in my workspace.
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
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
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 # SUCCESSAdditional 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.
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! ☀️
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?
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.
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,
},
}
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.
I can confirm this issue as well. If you have a large iconset json, it will cause the memory issue.
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,
},