Vuejs with Laravel production: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Question

this question might asked before but the sulotions sugested did not solve my problem.

I'm using Vue2 inside Laravel 7, in Live vps server when I run npm run prod I get below error.

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

and this here is the full error

> @ prod /var/www/html/exptradies
> npm run production


> @ production /var/www/html/exptradies
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js


<--- Last few GCs --->

[3521:0x302b050]   110565 ms: Mark-sweep 489.2 (517.6) -> 485.0 (517.6) MB, 1150.6 / 0.0 ms  (average mu = 0.155, current mu = 0.100) allocation failure scavenge might not succeed
[3521:0x302b050]   111997 ms: Mark-sweep 489.2 (517.6) -> 485.0 (517.6) MB, 1222.8 / 0.0 ms  (average mu = 0.150, current mu = 0.146) allocation failure scavenge might not succeed


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x384b92cc08d1 <JSObject>
    0: builtin exit frame: concat(this=0x0871a8909981 <JSArray[0]>,0x0871a8909961 <JSArray[0]>,0x0871a8909981 <JSArray[0]>)

    1: /* anonymous */(aka /* anonymous */) [0x20144909fd61] [/var/www/html/exptradies/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:~1] [pc=0x21c8562eee7d](this=0x349882d804b1 <undefined>,0x3c3d355838b9 <AST_Call map = 0x1ea8d45e1279>,0x0871a89...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa1ae50 node::Abort() [node]
 2: 0xa1b25c node::OnFatalError(char const*, char const*) [node]
 3: 0xb9b20e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb9b589 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xd58815  [node]
 6: 0xd58ea6 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
 7: 0xd65765 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
 8: 0xd66615 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xd690cc v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
10: 0xd2f752 v8::internal::Factory::AllocateRawWithAllocationSite(v8::internal::Handle<v8::internal::Map>, v8::internal::AllocationType, v8::internal::Handle<v8::internal::AllocationSite>) [node]
11: 0xd3b104 v8::internal::Factory::NewJSArrayWithUnverifiedElements(v8::internal::Handle<v8::internal::FixedArrayBase>, v8::internal::ElementsKind, int, v8::internal::AllocationType) [node]
12: 0xd3b549 v8::internal::Factory::NewJSArray(v8::internal::ElementsKind, int, int, v8::internal::ArrayStorageAllocationMode, v8::internal::AllocationType) [node]
13: 0xec65c3 v8::internal::ElementsAccessor::Concat(v8::internal::Isolate*, v8::internal::Arguments*, unsigned int, unsigned int) [node]
14: 0xc0a565  [node]
15: 0xc12dfd v8::internal::Builtin_ArrayConcat(int, unsigned long*, v8::internal::Isolate*) [node]
16: 0x140e919  [node]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2023-03-02T16_32_12_621Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ prod: `npm run production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2023-03-02T16_32_12_662Z-debug.log

there are npm and node version

jawadi@groovy-voyage:/$ npm --version
6.14.16
jawadi@groovy-voyage:/$ node --version
v12.22.12

this is webpack.mix.js

const mix = require("laravel-mix");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js("resources/js/app.js", "public/js").sass(
    "resources/sass/app.scss",
    "public/css"
);

mix.browserSync(process.env.APP_URL);

Answer 1

Follow this command:

NODE_OPTIONS=--max_old_space_size=4096
npm run prod