nuxt: Nuxt3 Heap out of memory when building and missing babel modules
Environment
- Operating System:
Windows_NT - Node Version:
v18.12.1 - Nuxt Version:
3.0.0 - Nitro Version:
1.0.0 - Package Manager:
npm@9.2.0 - Builder:
vite - User Config:
app,build,modules,proxy,css,vite,i18n,runtimeConfig,plugins,components - Runtime Modules:
@nuxtjs/i18n@8.0.0-beta.7,nuxt-proxy@0.3.4 - Build Modules:
-
Reproduction
Honnestly, I truly don’t know how to reproduce this issue. It only happens when i build my application. But i hope you can give me some hint about what may the reason behind it
Here are the informations i can give :
package.json
{
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@types/chart.js": "^2.9.37",
"@types/lodash": "^4.14.191",
"@types/multer": "^1.4.7",
"nuxt": "3.0.0",
"sass": "^1.57.1",
"unplugin-auto-import": "^0.12.1",
"unplugin-vue-components": "^0.22.12"
},
"dependencies": {
"@ant-design/icons-vue": "^6.1.0",
"@googlemaps/js-api-loader": "^1.15.1",
"@nuxtjs/i18n": "^8.0.0-beta.7",
"@sentry/browser": "^7.28.0",
"@sentry/tracing": "^7.28.0",
"@vuepic/vue-datepicker": "^3.6.3",
"@vueup/vue-quill": "^1.0.1",
"animated-number-vue": "^1.0.0",
"ant-design-vue": "^3.2.15",
"bootstrap": "^5.2.3",
"chart.js": "^3.9.1",
"chartjs-adapter-date-fns": "^3.0.0",
"chartjs-plugin-annotation": "^2.1.0",
"chartjs-plugin-datalabels": "^2.2.0",
"croppie": "^2.6.5",
"date-fns": "^2.29.3",
"google-auth-library": "^8.7.0",
"is-image": "^3.1.0",
"js-base64": "^3.7.3",
"leaflet": "^1.9.3",
"leaflet-gesture-handling": "^1.2.2",
"leaflet.markercluster": "^1.5.3",
"libphonenumber-js": "^1.10.15",
"lodash": "^4.17.21",
"moment-timezone": "^0.5.39",
"nprogress": "^0.2.0",
"numbro": "^2.3.6",
"nuxt-proxy": "^0.3.4",
"pinia": "^2.0.28",
"qs": "^6.11.0",
"query-string": "^8.1.0",
"quill": "^1.3.7",
"sortablejs": "^1.15.0",
"vue-cropperjs": "^5.0.0",
"vue-easy-lightbox": "^1.11.0",
"vue-facebook-login-component-next": "^1.0.4",
"vue-i18n": "^9.3.0-beta.14-77e850b",
"vue-it-bigger": "^0.3.1",
"vue-multiselect": "^3.0.0-alpha.2",
"vue-range-component": "^1.0.3",
"vue-slide-toggle": "^1.1.1",
"vue3-google-login": "^2.0.12",
"vue3-perfect-scrollbar": "^1.6.1",
"vue3-slide-up-down": "^1.2.5",
"vuedraggable": "^2.24.3",
"xlsx": "^0.18.5",
"yup": "^0.32.11"
}
}
nuxt.config.js
// https://nuxt.com/docs/api/configuration/nuxt-config
import fr from "./locales/fr.json";
import en from "./locales/en.json";
import nl from "./locales/nl.json";
export default defineNuxtConfig({
app: {
head: {
title: "APP ©",
charset: "utf-8",
meta: [{ name: "theme-color", content: "#ffdd67" }],
link: [
// { rel: "icon", type: "image/png", href: "/favicon.png" },
{ rel: "preconnect", href:"https://fonts.googleapis.com"},
{ rel: "preconnect", href:"https://fonts.gstatic.com", crossorigin: ""},
{ rel: "stylesheet", href:"https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap"},
{
hid: "apple-touch-icon",
rel: "apple-touch-icon",
href: "/favicon.png",
},
// {
// rel: "stylesheet", href: "/css/no-script-style.css"
// }
],
},
},
build: {
transpile: ["chart.js"],
analyze: false,
},
modules: ['@nuxtjs/i18n', 'nuxt-proxy'],
proxy: {
options:[
{
target: process.env.API_HOST_URL,
changeOrigin: true,
pathRewrite: {
"^/api/media/upload": "/api/v1/upload",
},
pathFilter: ["/api/media/upload"],
},
{
target: process.env.API_HOST_URL,
changeOrigin: true,
pathRewrite: {
"^/api/product/saveProduct": "/api/v1/smart-product",
},
pathFilter: ["/api/product/saveProduct"],
},
]
},
css: [
"ant-design-vue/dist/antd.css",
"~/node_modules/bootstrap/scss/bootstrap.scss",
"~/assets/styles/main.scss",
"vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css",
"@vuepic/vue-datepicker/dist/main.css",
"~/assets/styles/no-style.scss",
],
vite: {
// @ts-expect-error: Missing ssr key
ssr: {
noExternal: [
"date-fns",
"compute-scroll-into-view",
"ant-design-vue",
"@ant-design/icons-vue",
],
},
},
i18n: {
vueI18n: {
legacy: false,
messages: {
en,
fr,
nl
},
fallbackLocale: ['en','fr'],
silentTranslationWarn: true
},
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'ag-lang',
redirectOn: 'root', // recommended
}
},
runtimeConfig: {
public: {
LANG: process.env.LANG,
GOOGLE_API_KEY: process.env.GOOGLE_API_KEY,
GMB_CLIENT_ID: process.env.GMB_CLIENT_ID,
GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
},
API_BASE_URL: process.env.API_BASE_URL,
API_HOST_URL: process.env.API_HOST_URL,
UPLOAD_URI: process.env.UPLOAD_URI,
PERSONAE: process.env.PERSONAE,
ENV: process.env.ENV,
NODE_ENV: process.env.NODE_ENV
},
plugins: [
{
src: "~/plugins/lightbox.ts",
ssr: false,
},
{
src: "~/plugins/debugger.ts",
ssr: false,
},
],
components: {
dirs: [
'~/composables',
'~/components',
]
}
})
Describe the bug
When I run npm run build, things seemingly working well but after some time more logs appear in the console .
WARN Could not resolve import @babel .....
Additional context
No response
Logs
> build
> nuxt build
Nuxi 3.0.0 10:57:57
Nuxt 3.0.0 with Nitro 1.0.0 10:57:57
WARN 10:58:58
/identity/sign-in/g-normal.png referenced in C:/Users/User/Documents/maj/front-maj/pages/init-password/[details].vue?vue&type=style&index=0&scoped=504ac4b2&lang.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime
WARN 10:58:58
/identity/sign-in/g-normal.png referenced in C:/Users/User/Documents/maj/front-maj/pages/onBoarding/connexion-choice-mode.vue?vue&type=style&index=0&scoped=109de067&lang.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime
WARN The emitted file "_nuxt/Multiple.356c90f4.css" overwrites a previously emitted file of the same name. 11:00:28
WARN 11:00:34
(!) 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.
i Client built in 125451ms 11:00:34
i Building server... 11:00:34
WARN 11:01:13
/identity/sign-in/g-normal.png referenced in C:/Users/User/Documents/maj/front-maj/pages/init-password/[details].vue?vue&type=style&index=0&scoped=ee80a0be&lang.scss?inline&used didn't resolve at build time, it will remain unchanged to be resolved at runtime
WARN 11:01:13
/identity/sign-in/g-normal.png referenced in C:/Users/User/Documents/maj/front-maj/pages/init-password/[details].vue?vue&type=style&index=0&scoped=ee80a0be&lang.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime
WARN 11:01:13
/identity/sign-in/g-normal.png referenced in C:/Users/User/Documents/maj/front-maj/pages/onBoarding/connexion-choice-mode.vue?vue&type=style&index=0&scoped=109de067&lang.scss?inline&used didn't resolve at build time, it will remain unchanged to be resolved at runtime
WARN 11:01:13
/identity/sign-in/g-normal.png referenced in C:/Users/User/Documents/maj/front-maj/pages/onBoarding/connexion-choice-mode.vue?vue&type=style&index=0&scoped=109de067&lang.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime
WARN The emitted file "_nuxt/Multiple.379bb318.css" overwrites a previously emitted file of the same name. 11:02:50
√ Server built in 147328ms 11:03:01
√ Generated public .output/public nitro 11:03:08
i Building Nitro Server (preset: node-server) nitro 11:03:08
WARN Could not resolve import "@babel/runtime/helpers/esm/defineProperty.js" in C:\Users\User\Documents\maj\front-maj\.nuxt\dist\server\server.mjs using exports defined in C:\Users\User\Documents\maj\front-maj\node_modules\@babel\runtime\package.json.
WARN Could not resolve import "@babel/runtime/helpers/esm/asyncToGenerator.js" in C:\Users\User\Documents\maj\front-maj\.nuxt\dist\server\server.mjs using exports defined in C:\Users\User\Documents\maj\front-maj\node_modules\@babel\runtime\package.json.
WARN Could not resolve import "@babel/runtime/helpers/esm/objectSpread2.js" in C:\Users\User\Documents\maj\front-maj\.nuxt\dist\server\server.mjs using exports defined in C:\Users\User\Documents\maj\front-maj\node_modules\@babel\runtime\package.json.
WARN Could not resolve import "@babel/runtime/helpers/esm/objectWithoutProperties.js" in C:\Users\User\Documents\maj\front-maj\.nuxt\dist\server\server.mjs using exports defined in C:\Users\User\Documents\maj\front-maj\node_modules\@babel\runtime\package.json.
WARN Could not resolve import "@babel/runtime/helpers/esm/slicedToArray.js" in C:\Users\User\Documents\maj\front-maj\.nuxt\dist\server\server.mjs using exports defined in C:\Users\User\Documents\maj\front-maj\node_modules\@babel\runtime\package.json.
WARN Could not resolve import "@babel/runtime/helpers/esm/extends.js" in C:\Users\User\Documents\maj\front-maj\.nuxt\dist\server\server.mjs using exports defined in C:\Users\User\Documents\maj\front-maj\node_modules\@babel\runtime\package.json.
WARN Could not resolve import "@babel/runtime/helpers/esm/toConsumableArray.js" in C:\Users\User\Documents\maj\front-maj\.nuxt\dist\server\server.mjs using exports defined in C:\Users\User\Documents\maj\front-maj\node_modules\@babel\runtime\package.json.
WARN Could not resolve import "@babel/runtime/helpers/esm/typeof.js" in C:\Users\User\Documents\maj\front-maj\.nuxt\dist\server\server.mjs using exports defined in C:\Users\User\Documents\maj\front-maj\node_modules\@babel\runtime\package.json.
ERROR (node:2656) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./regenerator/" in the "exports" field module resolution of the package at C:\Users\User\Documents\maj\front-maj\node_modules\@babel\runtime\package.json imported from C:\Users\User\Documents\maj\front-maj\node_modules.
Update this package.json to use a subpath pattern like "./regenerator/*".
(Use `node --trace-deprecation ...` to show where the warning was created)
..... more warn here ....
<--- Last few GCs --->
[2656:000001DF58927940] 511573 ms: Mark-sweep 2013.9 (2091.6) -> 2012.7 (2091.4) MB, 1022.4 / 0.0 ms (average mu = 0.211, current mu = 0.009) allocation failure; scavenge might not succeed
[2656:000001DF58927940] 513611 ms: Mark-sweep 2028.4 (2091.4) -> 2027.2 (2117.4) MB, 2021.5 / 0.0 ms (average mu = 0.083, current mu = 0.008) allocation failure; scavenge might not succeed
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF60B131B7F node_api_throw_syntax_error+203775
2: 00007FF60B0B1556 v8::internal::wasm::WasmCode::safepoint_table_offset+63558
3: 00007FF60B0B28C2 v8::internal::wasm::WasmCode::safepoint_table_offset+68530
4: 00007FF60BB547F4 v8::Isolate::ReportExternalAllocationLimitReached+116
5: 00007FF60BB3FB52 v8::Isolate::Exit+674
6: 00007FF60B9C1BBC v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
7: 00007FF60B9BEDDB v8::internal::Heap::CollectGarbage+3963
8: 00007FF60B9D5013 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
9: 00007FF60B9D58BD v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
10: 00007FF60B9E50F3 v8::internal::Factory::NewFillerObject+851
11: 00007FF60B6D6825 v8::internal::DateCache::Weekday+1349
12: 00007FF60BBF1E81 v8::internal::SetupIsolateDelegate::SetupHeap+558193
13: 00007FF5AD7902AC
PS C:\Users\User\Documents\maj\front-maj> npm i
> postinstall
> nuxt prepare
Nuxi 3.0.0 12:00:23
√ Types generated in .nuxt 12:00:39
up to date, audited 910 packages in 24s
142 packages are looking for funding
run `npm fund` for details
2 moderate severity vulnerabilities
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 16 (3 by maintainers)
Hi! We also encounter the memory usage issue on Netlify, but also on a local machine memory usage builds up very quick. Already set Netlify to use 8192MB (with NODE_OPTIONS --max-old-space-size=8192) but still runs out of memory. We do generate a lot of pages (over 4000). We tried to set the Nitro option concurrency in prerender to 1 (and a lot of other values), but still gives the issue.
At this moment we cannot use Nuxt 3 (3.6.5) + Nitro on Netlify. But works fine with Nuxt 2. Hope someone finds a resolution soon, but I think more people encounter this at the moment.
Have same issue, cssnano didn’t solved it
Add this to Nuxt config. It works for me
postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, cssnano: process.env.NODE_ENV === 'production' ? { preset: ['default', { discardComments: { removeAll: true } }] } : false, // disable cssnano when not in production }, }Thank you @martijnloaviesHi. I see you move my #21458 problem to here. In my platform we don’t have a missing
babelmodules and the code is works but with high memory usage. so the problem is “near”.Thanks for all.
I was able to resolve this on Digital Ocean by decreasing the heap size with the following build command in
package.json:We’ve experienced this recently on our CI. Relevant issues: https://github.com/actions/runner-images/issues/70 and https://github.com/vitejs/vite/issues/2433
Solved by increasing
--max-old-space-size=16384in the github action.