nuxt / nuxt

The Intuitive Vue Framework.
https://nuxt.com
MIT License
54.78k stars 5.01k forks source link

Nuxt3 Heap out of memory when building and missing babel modules #18507

Closed RijaCloud closed 10 months ago

RijaCloud commented 1 year ago

Environment


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.
hymair commented 1 year ago

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=16384 in the github action.

RijaCloud commented 1 year ago

Hi @hymair , thank you for the answer. But what may be the origin of the heap ?

RijaCloud commented 1 year ago

We've experienced this recently on our CI. Relevant issues: actions/runner-images#70 and vitejs/vite#2433

Solved by increasing --max-old-space-size=16384 in the github action.

I tried this but still the same problem, also I don't understand why do I have this error :

WARN  Could not resolve import "@babel/runtime/helpers/esm/defineProperty.js" in C:\Users\User\Documents\maj\front-maj\.nuxt\dist\server\_nuxt\collection-info-stepper.d68cd38f.js using exports defined in C:\Users\User\Documents\maj\front-maj\node_modules\@babel\runtime\package.json.

Also how do you set the --max-old-space-size=16384 ? @hymair . Thx :)

toniengelhardt commented 1 year ago

I was able to resolve this on Digital Ocean by decreasing the heap size with the following build command in package.json:

"build": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.mjs build"
MosheL commented 1 year ago

Hi. I see you move my #21458 problem to here. In my platform we don't have a missing babel modules and the code is works but with high memory usage. so the problem is "near".

Thanks for all.

emaia commented 1 year ago

Hi! I'm not sure if it's the same problem but I can't deploy in Netlify after v3.6.

If I lock nuxt in v3.5.3 or remove one of the modules it deploys without problems.

image

Reproduction repo: https://github.com/emaia/test-netlify

8:47:40 PM: Functions bundling                                            
8:47:40 PM: ────────────────────────────────────────────────────────────────
8:47:40 PM: ​
8:47:40 PM: Packaging Functions from .netlify/functions-internal directory:
8:47:40 PM:  - server/server.mjs
8:47:40 PM: ​
8:47:59 PM: <--- Last few GCs --->
8:47:59 PM: [3762:0x75d22b0]    23133 ms: Scavenge 2004.0 (2039.7) -> 2003.7 (2050.7) MB, 5.0 / 0.0 ms  (average mu = 0.155, current mu = 0.125) allocation failure;
8:47:59 PM: [3762:0x75d22b0]    25182 ms: Mark-sweep 2044.3 (2084.3) -> 2021.8 (2060.9) MB, 2029.7 / 0.0 ms  (average mu = 0.093, current mu = 0.021) allocation failure; scavenge might not succeed
8:47:59 PM: [3762:0x75d22b0]    25198 ms: Scavenge 2029.7 (2060.9) -> 2030.6 (2084.9) MB, 12.5 / 0.0 ms  (average mu = 0.093, current mu = 0.021) allocation failure;
8:47:59 PM: <--- JS stacktrace --->
8:47:59 PM: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
8:47:59 PM:  1: 0xb7a940 node::Abort() [/opt/buildhome/node-deps/node]
8:47:59 PM:  2: 0xa8e823  [/opt/buildhome/node-deps/node]
8:47:59 PM:  3: 0xd5c990 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/opt/buildhome/node-deps/node]
8:47:59 PM:  4: 0xd5cd37 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/opt/buildhome/node-deps/node]
8:47:59 PM:  5: 0xf3a435  [/opt/buildhome/node-deps/node]
8:47:59 PM:  6: 0xf3b338 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/opt/buildhome/node-deps/node]
8:47:59 PM:  7: 0xf4b843  [/opt/buildhome/node-deps/node]
8:47:59 PM:  8: 0xf4c6b8 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/opt/buildhome/node-deps/node]
8:47:59 PM:  9: 0xf4f885 v8::internal::Heap::HandleGCRequest() [/opt/buildhome/node-deps/node]
8:47:59 PM: 10: 0xecd9df v8::internal::StackGuard::HandleInterrupts() [/opt/buildhome/node-deps/node]
8:47:59 PM: 11: 0x12ce115 v8::internal::Runtime_StackGuard(int, unsigned long*, v8::internal::Isolate*) [/opt/buildhome/node-deps/node]
8:47:59 PM: 12: 0x16fb6f9  [/opt/buildhome/node-deps/node]
8:48:01 PM: /opt/build-bin/build: line 124:  3762 Aborted                 (core dumped) FORCE_COLOR=1 $netlify_build_node_bin $netlify_build_bin --cwd=$repository_root --repositoryRoot=$repository_root --config=$configuration_file_path --branch=$branch --siteId=$site_id --defaultConfig=$default_config --baseRelDir=$base_rel_dir --context=$context --node-path=$user_node_path --cachedConfigPath=$cached_netlify_build_config_file --api-host=$netlify_endpoint --token=$netlify_token --build-id=$BUILD_ID --deploy-id=$DEPLOY_ID --mode=buildbot --telemetry=$build_telemetry --send-status --save-config --statsd.host=$DATADOG_HOST --statsd.port=$STATSD_PORT --tracing.enabled=$tracing_enabled --tracing.host=$DATADOG_HOST --tracing.traceId=$trace_id --tracing.parentSpanId=$parent_span_id --tracing.traceFlags=$trace_flags --functions-dist-dir=$functions_dist_dir --edge-functions-dist-dir=$edge_functions_dist_dir --cache-dir=$cache_dir --buildbot-server-socket=$buildbot_server_socket --framework=$framework --feature-flags=$feature_flags --testOpts.silentLingeringProcesses=$SILENT_LINGERING_PROCESSES --system-log-file=$system_log_file
8:48:02 PM: Error running command: Build script returned non-zero exit code: 134
8:48:03 PM: Failing build: Failed to build site
8:48:03 PM: Finished processing build request in 54.448s
martijnloavies commented 1 year ago

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.

vettndr commented 1 year ago

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.

@martijnloavies I'm encountering the same issue.

@martijnloavies this temporary solved for me: https://github.com/nuxt/nuxt/issues/22257#issuecomment-1666680796

htphongx4 commented 1 year ago

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 @martijnloavies

vettndr commented 1 year ago

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 @martijnloavies

Thank you! @htphongx4

danielroe commented 10 months ago

Closing as this is not a Nuxt issue but a cssnano bug.

xlmnxp commented 9 months ago

close

What?, how you close this ticket when there a lot of there tickets closed and point to this ticket without solution?!

danielroe commented 9 months ago

It is closed as it is a cssnano bug add needs to be resolved there, not in Nuxt.

The workaround is just two comments up: https://github.com/nuxt/nuxt/issues/18507#issuecomment-1684691350

xlmnxp commented 9 months ago

It is closed as it is a cssnano bug add needs to be resolved there, not in Nuxt.

The workaround is just two comments up: #18507 (comment)

the issue still appear in nuxt by default! if issue happen in one of your dependencies that don't mean it resolved for you

Bredansky commented 9 months ago

Hello folks. I have a bunch of JSON files (20MB), which are supposed to be dynamically imported. After I added this code I started getting Heap error FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory for nuxt generate. I expanded max-old-space-size=16384, but instead of an error, the building process freezes.

const country = 'NL'
const cities = await import(`../../../assets/countryData/${country}.json`)
artrayd commented 8 months ago

Have same issue, cssnano didn't solved it

Siilwyn commented 5 months ago

@Bredansky probably related to https://github.com/vitejs/vite/issues/2433

Loosie94 commented 2 months ago

Got this issue on Vercel. Won't build properly. Very annoying.

EDIT: Switching form Yarn to PNPM did the trick for me.