Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FATAL ERROR when building nuxt: JavaScript heap out of memory #226

Open
jrutila opened this issue Jul 31, 2024 · 11 comments
Open

FATAL ERROR when building nuxt: JavaScript heap out of memory #226

jrutila opened this issue Jul 31, 2024 · 11 comments

Comments

@jrutila
Copy link

jrutila commented Jul 31, 2024

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
Copy link
Author

jrutila commented Jul 31, 2024

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

@antfu
Copy link
Member

antfu commented Jul 31, 2024

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
Copy link

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
Copy link

honmanyau commented Aug 1, 2024

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
Copy link
Member

antfu commented Aug 1, 2024

I improved the docs a bit to note this situation, please read -> cc166d6

Meanwhile, since 1.4.4, serverBundle.externalizeIconsJson is introduced to also improve this: b05b720

@honmanyau
Copy link

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! ☀️

@jrutila
Copy link
Author

jrutila commented Aug 5, 2024

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
Copy link
Author

jrutila commented Aug 5, 2024

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\[email protected]_@[email protected]_@[email protected]_@[email protected]_@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
Copy link
Author

jrutila commented Aug 5, 2024

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
Copy link
Author

jrutila commented Aug 8, 2024

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
Copy link

genu commented Sep 16, 2024

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

See iconify/iconify#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,
    },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants