Devextreme Error: CRITICAL ISSUE - CALL_AND_RETRY_LAST Allocation unsuccessful - Running out of memory in JavaScript heap

Encountering an issue while trying to update devextreme from version 16.1.7 to 16.2.4 in an angular2 application. When running 'npm build', I receive the following error: 'FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory'

Here are the details of the error:

     <--- Last few GCs --->
      169161 ms: Mark-sweep 1268.1 (1413.2) -> 1268.1 (1424.2) MB, 1402.3 / 0.0 ms [allocation failure] [GC in old space requested].
      170593 ms: Mark-sweep 1268.1 (1424.2) -> 1268.1 (1424.2) MB, 1431.9 / 0.0 ms [allocation failure] [GC in old space requested].
      171955 ms: Mark-sweep 1268.1 (1424.2) -> 1277.1 (1413.2) MB, 1361.6 / 0.0 ms [last resort gc].
      173350 ms: Mark-sweep 1277.1 (1413.2) -> 1286.1 (1413.2) MB, 1394.4 / 0.0 ms [last resort gc].
    <--- JS stacktrace --->
    ==== JS stack trace =========================================
    Security context: 000002971F8CFB49 <JS Object>
        2: _serializeMappings(aka SourceMapGenerator_serializeMappings) [D:\WorkSpaces\updated to 16.2.4\eln-data-management\src\client\node_modules\source-map\lib\source-map-generator.js:~291] [pc=0000005A37AF467F] (this=0000022768C27969 <a SourceMapGenerator with map 0000023BE9EFB481>)
        3: toJSON(aka SourceMapGenerator_toJSON) [D:\WorkSpaces\updated to 16.2.4\eln-data-management\src\client\n...
    FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
    npm ERR! code ELIFECYCLE
    npm ERR! errno 3
    npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3051404070001e001e00">[email protected]</a> build: `rimraf dist && webpack --progress --profile --bail`
    npm ERR! Exit status 3
    npm ERR!
    npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3455444474041a041a04">[email protected]</a> build script 'rimraf dist && webpack --progress --profile --bail'.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the app package,
    npm ERR! not with npm itself.

The application is built using webpack1.

// Helper: root() is defined at the bottom
var path = require('path');
var webpack = require('webpack');

// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

/**
 * Env
 * Get npm lifecycle event to identify the environment
 */
var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
var isTest = ENV === 'test' || isTestWatch;
var isProd = ENV === 'build';

module.exports = function makeWebpackConfig() {
  /**
   * Config
   * Reference: http://webpack.github.io/docs/configuration.html
   * This is the object where all configuration gets set
   */
  var config = {};

   // add debug messages
  config.debug = !isProd || !isTest;

  /**
   * Devtool
   * Reference: http://webpack.github.io/docs/configuration.html#devtool
   * Type of sourcemap to use per build type
   */
  if (isProd) {
    config.devtool = 'source-map';
  } 
  else if (isTest) {
    config.devtool = 'inline-source-map';
  }
  else {
    config.devtool = 'eval-source-map';
  }

  

  // Entry points for different environments
  
  config.entry = isTest ? {} : {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts' // our angular app
  };

  
 

  
   
   

  return config;
}();

// Helper functions
function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

tsconfig as follows

       {
          "compilerOptions": {
            "target": "es5",
            "module": "commonjs",
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "sourceMap": true,
            "noEmitHelpers": true,
            "lib": [ "es2015", "dom" ]
          },
          "compileOnSave": false,
          "buildOnSave": false,
          "awesomeTypescriptLoaderOptions": {
            "forkChecker": true,
            "useWebpackText": true
          }  
        }

Experiencing issues after upgrading to devextreme 16.2.x. The application is functional and builds successfully with devextreme version 16.1.7.

Answer №1

It appears that the issue lies within the windows environment, requiring us to increase memory allocation in the webpack/node process

Within node_modules/.bin/webpack.cmd file, adjust memory limit to 8GB

@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" --max_old_space_size=8048 "%~dp0..\webpack\bin\webpack.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node --max_old_space_size=8048 "%~dp0..\webpack\bin\webpack.js" %*
)

Special thanks to Angelminster for their assistance

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

Translating from a higher-level programming language to a lower-level programming language

Is compilation effectively the transformation of high-level programming languages (HLL) into machine code or low-level language? If so, why is TypeScript (a HLL) compiled to JavaScript (also a HLL) instead of being compiled to a low-level language? ...

Exploring my initial encounter with JavaScript

I am currently reviewing the following code snippet: if(text && spot && box) { document.getElementById('text-shadow-box').onmousemove = onMouseMove; document.getElementById('text-shadow-box').ontouchmove = func ...

How to Utilize FormData in IE9 with Angular 5 and TypeScript Without Ajax or jQuery

Within my Angular 5/Typescript application, there is an UploadFile component structured as follows: component.html .... <form #formUpload id="formUpload"> <input type="file" class="input-file-ghost" (change)="onChangeFile($event.target.files) ...

Exploring the depths: How to navigate through a complex nested object in an Angular 6 template

I have retrieved an object from a service structured as shown below let obj = [ 0: { key1: 'val', key2: 'val', key3: [{ key1: 'val', key2: 'val', key3: []; }] ...

Front-end Angular cannot find the root using findByKey in the back-end

After successfully testing my findByKey() function in the back-end using Postman, I encountered an issue in the front-end services where I could not return an object. Instead, it would return an observable every time I console.log. Sample 1: Back-end root ...

Issue: Configuration Error - CKEditor5 cannot be loaded for extension in Vuejs

Hey everyone, I'm currently facing an issue. I'm trying to customize a build and everything works fine in the cloned ckeditor along with the sample.html file. However, when attempting to implement the customized build in Vue 2, I encounter an err ...

Could someone assist me in resolving the issue of receiving empty emails from my online form submission?

Every day, I receive 6 blank emails from my contact form at the same time. Even though the form on the website is filled out correctly and all the information goes through, I still get these mysterious blank emails. I have implemented validation checks in ...

Exploring Angular 1.5: A guide to binding a transcluded template to a component's scope

Currently, I am utilizing a form component that includes common validation and saving functions. Inputs are injected into the form as transcluded templates in the following manner: <form-editor entity="vm.entity"> <input ng-model="vm.dirt ...

Angular ng-repeat table displaying items in alternating columns

Just diving into the world of Angular and currently working on a page that utilizes ng-repeat with a table element. The repeating function is working perfectly, as shown below: Now, I'm looking to have every other table displayed side by side before ...

The server response value is not appearing in Angular 5

It appears that my client is unable to capture the response data from the server and display it. Below is the code for my component: export class MyComponent implements OnInit { data: string; constructor(private myService: MyService) {} ngOnInit ...

Creating a live notification in the chat that displays "User is typing" to all participants

I am working on developing a chat application using jQuery and PHP. I am looking for guidance on how to implement a feature where a user, let's say "Evx," types a message in real-time and it is instantly displayed to all other users. This functionalit ...

Error: Unable to locate the reference

Having trouble with my JavaScript code not recognizing the linked .js files I added. I initially linked them through CodePen, but manual references don't seem to be working. Attempted suggestions from this page Why does jQuery or a DOM method such as ...

What could be causing my right-floating elements to shift more towards the left with each occurrence?

After following a todo list tutorial, everything was running smoothly until I decided to add some styling to it. I placed a Font Awesome trash can icon inside a button with the class "remove." Essentially, I removed all the styles from the button, leaving ...

Utilize Angular for the front-end user interface and Asp.Net for the backend within the same Azure App

I am facing a challenge with deploying Angular and Asp.Net together on the same app service in Azure. Despite defining the Physical Path for the Angular project, it is not visible on the website and instead shows an error. Interestingly, when I deploy only ...

What is the best way to transform a JavaScript object into a JavaScript literal?

Currently, in my nodejs project, I have an object defined as follows: const objA = { key : 'value' }; My goal is to create a new file named obja.js which should contain the same literals from the object, rather than as a JSON literal. How can I ...

Create a global SCSS file in ReactJS that stores all variables, mixins, and more

Looking for a solution to manage multiple components in your SCSS project efficiently? Consider creating a central file that houses all your variables and mixins, making them globally accessible without the need to manually import the file into every SCSS ...

update angular component after deleting an item

After deleting a contact in the table, I'm trying to refresh my contact list page but it's not working. Any suggestions? This is the list of contacts in the contact.component.ts file Swal.fire({ title: 'Do you want to delete this contac ...

I'm encountering a type error stating that children are not defined when attempting to establish parent-child relationships from a flat array. What

Trying to establish a parent-child relationship between modules based on their IDs. Ran into an issue with the function I used, as it returned an error stating that children were not defined. const data = [ { module_id: "96ac027b-b5ce-4326-b5db- ...

Displaying a dynamic menu using Angular's ngFor loop

I am attempting to create a menu with sub-menus. The desired structure for my menu is outlined below. However, the demo I'm testing is not producing the correct structure. Check out the demo here. "Sub Test": { // Main menu "Example1":"hai",//sub ...

Is there a way to dynamically update the target of a form using JavaScript?

My goal is to change the target of a form in order to open a new window. However, all redirections of this form use the same window except for one specific button. This button calls a custom JavaScript function that needs to change the default "_self" targ ...