Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
See original GitHub issueEnvironment
RootDir: /home/ubuntu/nuxt-app 15:29:06 Nuxt project info: 15:29:06
- Operating System:
Linux - Node Version:
v18.1.0 - Nuxt Version:
3.0.0-rc.4 - Package Manager:
yarn@1.22.19 - Builder:
vite - User Config:
typescript,css,router,build,ssr - Runtime Modules:
- - Build Modules:
-
Reproduction
nuxt.config.ts
import { defineNuxtConfig } from "nuxt";
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
typescript: {
strict: true,
},
css: ["vuetify/lib/styles/main.sass"],
router: {
prefetchLinks: false
},
build: {
transpile: ["vuetify"],
standalone: true,
},
ssr: false,
});
plugins/vuetify.js
// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import { mdi , aliases} from 'vuetify/iconsets/mdi';
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'mdi',
aliases,
sets: {
mdi
}
}
})
nuxtApp.vueApp.use(vuetify)
})
Also install country-state-city package, then create a very big page
<template>
<div>
<v-container fluid fill-height align="center">
<v-card class="elevation-12" width="80%" height="100%" v-if="stage === 1">
<template v-slot:title>
<h2>General Infomation</h2>
</template>
<v-card-text
>Customers will be only seeing your exact address while they're
booking.</v-card-text
>
<form ref="form" @submit.prevent="stage++">
<v-text-field
v-model="clubName"
name="Club Name"
label="Club Name"
type="text"
required
/>
<v-select
v-model="country"
:items="countires"
item-title="name"
item-value="isoCode"
label="Country"
required
return-object
/>
<v-select
v-model="city"
:items="cities"
item-title="name"
item-value="name"
label="City"
required
return-object
/>
<v-btn color="blue" type="submit" class="mt-4">Continue</v-btn>
</form>
</v-card>
<v-card v-if="stage === 2" class="elevation-12" width="80%" height="100%">
<v-card-title><h2>Enter your location</h2></v-card-title>
<GMapMap
:center="{ lat: lat, lng: lng }"
:zoom="7"
map-type-id="terrain"
style="width: 40vw; height: 400px"
>
</GMapMap>
<v-row>
<v-col>
<v-btn color="red" @click="stage--">Back</v-btn>
</v-col>
<v-col>
<v-btn color="blue" @click="stage++">Continue</v-btn>
</v-col>
</v-row>
</v-card>
<v-card v-if="stage === 3" class="elevation-12" width="50%" height="100%">
<v-card-title><h2>Opening Hours</h2></v-card-title>
<v-card-text>Show your working schedule to your customers</v-card-text>
<div v-if="!customizeTime">
<v-row>
<v-col>
<v-label>From</v-label>
<input
:value="schedule[0].start"
@input="(event) => handleStartChange(event.target.value)"
type="time"
/>
</v-col>
<v-col>
<v-label>To </v-label>
<input
:value="schedule[0].end"
@input="(event) => handleEndChange(event.target.value)"
type="time"
/>
</v-col>
<v-col>
<v-label
@click="customizeTime = !customizeTime"
style="color: blue"
>Customize Time</v-label
>
</v-col>
</v-row>
</div>
<div v-if="customizeTime">
<v-container v-for="(day, index) in weekdays">
<v-row>
<v-col>
<v-switch
v-bind:label="day"
color="blue"
v-model="schedule[index].toggle"
/>
</v-col>
<v-col>
<v-label>From</v-label>
<input type="time" :value="schedule[index].start" />
</v-col>
<v-col>
<v-label>To</v-label>
<input type="time" :value="schedule[index].end" />
</v-col>
</v-row>
</v-container>
<v-label @click="customizeTime = !customizeTime" style="color: blue"
>To default value</v-label
>
</div>
<v-row>
<v-col>
<v-btn color="red" @click="stage--">Back</v-btn>
</v-col>
<v-col>
<v-btn color="blue" @click="stage++">Continue</v-btn>
</v-col>
</v-row>
</v-card>
<v-card v-if="stage === 4" width = "90%">
<v-card-title><h2>Create Court</h2></v-card-title>
<v-card-text
>Add courts so your customer could book and play</v-card-text
>
<v-card width="30%" >
<v-card-text>Indoor courts</v-card-text>
<form ref = "form">
<v-text-field
v-model = "indoorCourtsNumber"
label = "How many?"
required
></v-text-field>
</form>
</v-card>
<v-card width="30%" >
<v-card-text>Outdoor courts</v-card-text>
<form ref = "form">
<v-text-field
v-model = "outdoorCourtsNumber"
label = "How many?"
required
></v-text-field>
</form>
</v-card>
<v-row>
<v-col>
<v-btn color="red" @click="stage--">Back</v-btn>
</v-col>
<v-col>
<v-btn color="blue" @click="stage++; handleCourts()">Continue</v-btn>
</v-col>
</v-row>
</v-card>
<v-card v-if = "stage === 5" width = "90%">
<v-card-title><h2>Contact Information</h2></v-card-title>
<v-card-text>Please verify the following information is correct and that the description is</v-card-text>
<form ref = "form">
<v-text-field
v-model = "website"
name = "website"
label = "Website"
type = "text"
required></v-text-field>
<v-text-field
v-model = "phone"
name = "phone"
label = "Phone"
type = "tel"
required></v-text-field>
<v-textarea
v-model = "description"
name = "description"
label = "Description"
type = "text"
required></v-textarea>
</form>
<v-btn color="red" @click="stage--">Back</v-btn>
</v-card>
</v-container>
</div>
</template>
<script setup lang="ts">
import { Country, City, ICountry, ICity } from "country-state-city";
interface Schedule {
day: number;
start: string;
end: string;
toggle: boolean;
}
interface ICourt{
courtType : string;
courtNumber : number;
}
let clubName = ref("");
let country = ref(Country.getCountryByCode("IN")!);
let city = ref({
name: "Amalner",
countryCode: "IN",
stateCode: "MH",
latitude: "21.03983000",
longitude: "75.05887000",
} as ICity);
let lng = ref(0);
let lat = ref(0);
watch(city, () => {
// user picked the city
lng.value = city.value.longitude;
lat.value = city.value.latitude;
});
let countires = ref(Country.getAllCountries());
let cities = ref(City.getCitiesOfCountry(country.value.isoCode));
const onCountryChange = () => {
cities.value = City.getCitiesOfCountry(country.value.isoCode);
};
watch(country, () => onCountryChange());
let weekdays = ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"];
let stage = ref(1);
let schedule = reactive([] as Schedule[]);
for (let i = 0; i < 7; i++) {
schedule.push({ day: i, start: "09:00", end: "17:00", toggle: true });
}
const handleStartChange = (value: string) => {
if (value == "") return;
for (let i = 0; i < 7; i++) {
schedule[i].start = value;
}
};
const handleEndChange = (value: string) => {
for (let i = 0; i < 7; i++) {
schedule[i].end = value;
}
};
let customizeTime = ref(false);
let indoorCourtsNumber = ref(1);
let outdoorCourtsNumber = ref(1);
let courts = reactive([] as ICourt[]);
const handleCourts = () => {
let courtNumber = 1;
courts = [];
for(let i = 0 ; i < indoorCourtsNumber.value ; i++){
courts.push({ courtType: "indoor", courtNumber : courtNumber + 1});
courtNumber = courtNumber + 1;
}
for(let i = 0 ; i < outdoorCourtsNumber.value ; i++){
courts.push({ courtType: "outdoor", courtNumber : courtNumber + 1});
courtNumber = courtNumber + 1;
}
}
let website = ref("");
let phone = ref("");
let description = ref("");
const handleSubmit = async () => {};
</script>
Describe the bug
Big components or pages like this is causing prerenderer to run out of memory. I tried throwing more memory at the memory. Spin up an ec2 instance but it gives rollup recursion limit error.
Additional context
No response
Logs
Error log:
~/nuxt-app$ yarn run build
yarn run v1.22.19
$ nuxt build
Nuxt CLI v3.0.0-rc.4 19:40:26
ℹ Vite client warmed up in 12087ms 19:40:42
WARN 19:41:11
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
ℹ Client built in 41249ms 19:41:11
ℹ Building server... 19:41:11
WARN 19:41:46
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✔ Server built in 34706ms 19:41:46
✔ Generated public .output/public nitro 19:41:46
ℹ Initializing prerenderer nitro 19:41:46
<--- Last few GCs --->
[5825:0x5860f00] 116384 ms: Scavenge 2043.5 (2080.2) -> 2043.5 (2081.7) MB, 5.8 / 0.0 ms (average mu = 0.149, current mu = 0.032) allocation failure;
[5825:0x5860f00] 118843 ms: Mark-sweep 2044.5 (2081.7) -> 2044.3 (2087.2) MB, 2458.1 / 0.0 ms (average mu = 0.079, current mu = 0.005) allocation failure; scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 0xb57f90 node::Abort() [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
2: 0xa701b3 node::FatalError(char const*, char const*) [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
3: 0xd4603e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
4: 0xd463b7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
5: 0xf26115 [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
6: 0xf37eed v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
7: 0xf1315a v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
8: 0xf142e7 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
9: 0xef63d3 v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
10: 0x12b3f3f v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
11: 0x16e07f9 [/home/ubuntu/.nvm/versions/node/v18.1.0/bin/node]
Aborted (core dumped)
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Issue Analytics
- State:
- Created a year ago
- Reactions:5
- Comments:6 (2 by maintainers)
Top Results From Across the Web
FATAL ERROR: Ineffective mark-compacts near heap limit ...
The error occurs when you exceed the default maximum memory allowed for Node.js. All this does is increase the maximum memory allowed.
Read more >JavaScript heap out of memory - Snyk Support
You may encounter an error such as the following while running one of the Snyk CLI commands: FATAL ERROR: Ineffective mark-compacts near heap...
Read more >FATAL ERROR: Ineffective mark-compacts near ... - YouTube
Next. js optimized production build Error. FATAL ERROR : Ineffective mark - compacts near heap limit Allocation failed - JavaScript heap out of ......
Read more >Ineffective mark-compacts near heap limit Allocation failed ...
I try to build onnxruntime for web. I'm stuck on Heap Memory problem. Env: Node: 16.15.1 Python: 3.10.5 RAM: 16GB.
Read more >How to solve JavaScript heap out of memory error
FATAL ERROR : Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory. Both errors above occur when ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I found a workaround.
But I still don’t understand why the
3.0.0-rc.3-27571095.9379606version can build but the version after3.0.0-rc.3-27571095.9379606can’t. And the error message doesn’t tell me what caused the error, maybe we can improve the error message so that nuxt3 users can find the error and solve it faster.My project runs fine in
yarn dev, but it throws an error inyarn build. I tried most of the versions between3.0.0-rc.3-27571095.9379606and3.0.0-rc.4-27598694.e38de4a, only3.0.0-rc.3-27571095.9379606can build successfully, versions after3.0.0-rc.3-27571095.9379606will throw errors when building, I haven’t been able to find the cause of the error for the past week.If I remove
/play/[courseId].vue,yarn buildworks fine, but I can’t find the problem on this page. If I keep/play/[courseId].vueand delete/index.vueand/user,yarn buildcan run normally, but I still can’t find the problem. Is the page too large or too many causing the build to fail?My
pagesdirectory structureHere are some error messages