VueJs encountered a fatal error when trying to promote young objects in the MarkCompactCollector, resulting in a failed allocation due to the JavaScript heap running

When I try to run the build command (npm run build) for my VueJs project, I encounter an error.

package.json

{
    "name": "acme-web",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "test:e2e": "vue-cli-service test:e2e",
        "test:unit": "vue-cli-service test:unit"
    },
    "dependencies": {
        // list of dependencies ...
    },
    "devDependencies": {
        // list of devDependencies ...
    }
}

error

$> npm run build

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c2c0cec68ed4c6c1e3938d928d93">[email protected]</a> build /home/bopsi/Projects/Acme/acme-web
> vue-cli-service build


⠙  Building for production...
<--- Last few GCs --->

// long stack trace showing JavaScript heap out of memory error ...

Aborted (core dumped)
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f0f2fcf4bce6f4f3d1a1bfa0bfa1">[email protected]</a> build: `vue-cli-service build`
npm ERR! Exit status 134
npm ERR! 
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f0f2fcf4bce6f4f3d1a1bfa0bfa1">[email protected]</a> build 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!     /home/bops/.npm/_logs/2021-03-15T12_38_56_342Z-debug.log

Why am I facing this error? Even after trying to pass --max_old_space_size=8192 params, the result remains the same.

Note

Interestingly, running the project locally using npm run serve works perfectly fine.

vue.jsnpmwebpacknpm-build

Answer №1

My issue is similar, except it arises when running npm run serve

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The property slider in the d3 slider package is not found in the type 'types of d3'

I attempted to integrate a d3 slider into my d3 chart in Angular 2. I installed the d3slider package using the command: npm install --save @types/d3.slider. However, when trying to access the method "d3.slider()", an error occurred stating that "property ...

typescriptd3.jsnpmnpm-installc3.js

Encountering build:web failure within npm script due to TypeScript

Our project is utilizing the expo-cli as a local dependency in order to execute build:web from an npm script without requiring the global installation of expo-cli. However, when we run npm run build:web, we encounter the following exception. To isolate th ...

javascripttypescriptreact-nativenpmexpo

What are the repercussions of labeling a function, TypeScript interface, or TypeScript type with export but never actually importing it? Is this considered poor practice or is there a potential consequence?

I find myself grappling with a seemingly straightforward question that surprisingly has not been asked before by others. I am currently immersed in a TypeScript project involving Vue, and one of the developers has taken to labeling numerous interfaces and ...

typescriptvue.jsecmascript-6export

Adding TypeScript to your Vue 3 and Vite project: A step-by-step guide

After setting up my project by installing Vue and Vite using the create-vite-app module, I decided to update all the packages generated by 'init vite-app' to the latest RC versions for both Vue and Vite. Now, I am interested in using TypeScript ...

typescriptvue.jsvite

What is the correct way to handle the return value of an useAsyncData function in Nuxt 3?

How can I display the retrieved 'data' from a useAsyncData function that fetches information from a pinia store? <script setup lang="ts"> import { useSale } from "~/stores/sale"; const saleStore = useSale(); const { da ...

typescriptvue.jsnuxt.jspinia

Guide to releasing a NestJs library on npm using the nrwl/nx framework

Struggling with creating a publishable NestJS library using NX. Despite reading numerous documentations, I still can't figure it out. I've developed a NestJS library within an NX monorepository and now I want to publish just this library on NPM, ...

typescriptnpmnestjsnrwlnrwl-nx

Learn how to enhance a Vue component by adding extra properties while having Typescript support in Vue 3

Attempting to enhance a Vue component from PrimeVue, I aim to introduce extra props while preserving the original components' typings and merging them with my new props. For example, when dealing with the Button component that requires "label" to be ...

typescriptvue.jsprimevuevite

Encountering issues with @typescript-eslint/typescript-estree due to using a non-officially supported version of TypeScript after updating Nuxt

After upgrading Nuxt in my project using the command npx nuxi upgrade, I encountered an issue while running eslint .. The output displayed a warning regarding the TypeScript version: ============= WARNING: You are currently running a version of TypeScript ...

typescriptnpmnuxt.jseslint

Identify when the Vue page changes and execute the appropriate function

Issue with Map Focus Within my application, there are two main tabs - Home and Map. The map functionality is implemented using OpenLayers. When navigating from the Home tab to the Map tab, a specific feature on the map should be focused on. However, if th ...

javascripttypescriptvue.jsionic-frameworkvuejs3

Mastering Inter-Composable Communication in Vue 3: A Guide

Composables in Vue documentation demonstrate how small composition functions can be used for organizing code by composing the app. Discover More About Extracting Composables for Code Organization "Extracted composables act as component-scoped servi ...

javascripttypescriptvue.jsvuejs3

Exploring the power of Vue CLI service in conjunction with TypeScript

I've recently set up a Vue project using the Vue CLI, but now I am looking to incorporate TypeScript into it. While exploring options, I came across this helpful guide. However, it suggests adding a Webpack configuration and replacing vue-cli-service ...

typescriptvue.jswebpackvue-cli

Guide on merging non-modular JavaScript files into a single file with webpack

I am trying to bundle a non-modular JS file that uses jQuery and registers a method on $.fn. This JS must be placed behind jQuery after bundling. Here is an example of the structure of this JS file: (function($){ $.fn.splitPane = ... }(JQuery) If y ...

javascripttypescriptwebpackfrontend

Issue with TypeScript: Error appears when importing express after running "npm i @types/express -D"

Struggling with adding the following line of code in an index.ts file: import express, { Application } from 'express'; Initially encountered an error with "from 'express'", so I ran npm i @types/express -D which fixed that is ...

typescriptnpm

When Using TypeScript with Serverless, 'this' Becomes Undefined When Private Methods are Called from Public Methods

Currently, I am working on constructing an AWS Serverless function using TypeScript. My focus is on creating an abstract class with a single public method that invokes some private methods. Below is the simplified version of my TypeScript class: export ...

javascripttypescriptwebpackserverless-framework

Leveraging global attributes beyond Vue components - Vue 3

I have created custom service instances in main.ts app.config.globalProperties.$service1 = new Service1(); app.config.globalProperties.$service2 = new Service2(); While I can use these instances inside Vue components, I also want to be able to utilize the ...

javascripttypescriptvue.jsvuejs3

Volta alert: Temporary directory creation failed

Recently, I attempted to globally download and install TypeScript using the npm install -g typescript command in my terminal. Unfortunately, an error occurred: Volta error: Could not create temporary directory in /Users/username/.volta/tmp/image/packages ...

typescriptnpmvolta

Error: Unrecognized action type in Vuex

I've been encountering some major issues with vuex lately. For some reason, getters, actions, and mutations are not being recognized. In the code snippet below, although fetchFacilities is working fine, addFacility is throwing an error: [vuex] unknown ...

typescriptvue.jsvuex

Vue: Simple ways to retrieve state data in MutationAction

I'm having trouble accessing the state inside @MutationAction Here is the setup I am using: Nuxt.js v2.13.3 "vuex-module-decorators": "^0.17.0" import { Module, VuexModule, MutationAction } from 'vuex-module-decorators' ...

javascripttypescriptvue.jsvuex

The Typescript compiler has trouble locating the definition file for an npm package

Recently, I released an npm package that was written in typescript. However, I have been facing difficulties in getting the definition recognized by typescript (webback and vscode). The only workaround that has worked for me so far is creating a folder wit ...

typescriptnpm

Passing properties from the parent component to the child component in Vue3JS using TypeScript

Today marks my inaugural experience with VueJS, as we delve into a class project utilizing TypeScript. The task at hand is to transfer the attributes of the tabsData variable from the parent component (the view) to the child (the view component). Allow me ...

javascripttypescriptvue.jsvuejs3