Devextreme: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
Trying to update version 16.1.7 to 16.2.4 in angular2 app. 'npm build' fails with error 'FATAL ERROR: CALL_AND_RETRY_LAST Distribution failed - JavaScript heap out of memory'
The error information is as follows
<--- 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! app@0.0.0 build: `rimraf dist && webpack --progress --profile --bail`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the app@0.0.0 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.
Using webpack1 to build an app.
// 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 = {};
/**
* 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';
}
// add debug messages
config.debug = !isProd || !isTest;
/**
* Entry
* Reference: http://webpack.github.io/docs/configuration.html#entry
*/
config.entry = isTest ? {} : {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts' // our angular app
};
/**
* Output
* Reference: http://webpack.github.io/docs/configuration.html#output
*/
config.output = isTest ? {} : {
path: root('dist'),
publicPath: isProd ? '/' : 'http://localhost:8082/',
filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
};
/**
* Resolve
* Reference: http://webpack.github.io/docs/configuration.html#resolve
*/
config.resolve = {
cache: !isTest,
root: root(),
// only discover files that have those extensions
extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'],
alias: {
'app': 'src/app',
'common': 'src/common'
}
};
var atlOptions = '';
if (isTest && !isTestWatch) {
// awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
atlOptions = 'inlineSourceMap=true&sourceMap=false';
}
/**
* Loaders
* Reference: http://webpack.github.io/docs/configuration.html#module-loaders
* List: http://webpack.github.io/docs/list-of-loaders.html
* This handles most of the magic responsible for converting modules
*/
config.module = {
preLoaders: isTest ? [] : [{test: /\.ts$/, loader: 'tslint'}],
loaders: [
// Support for .ts files.
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '@angularclass/hmr-loader'],
exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
// copy those assets to output
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file?name=fonts/[name].[hash].[ext]?'
},
// Support for *.json files.
{test: /\.json$/, loader: 'json'},
// Support for CSS as raw text
// use 'null' loader in test mode (https://github.com/webpack/null-loader)
// all css in src/style will be bundled in an external css file
{
test: /\.css$/,
exclude: root('src', 'app'),
loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
},
// all css required in src/app files will be merged in js files
{test: /\.css$/, include: root('src', 'app'), loader: 'raw!postcss'},
// support for .html as raw text
// todo: change the loader to something that adds a hash to images
{test: /\.html$/, loader: 'raw', exclude: root('src', 'public')}
],
postLoaders: []
};
if (isTest && !isTestWatch) {
// instrument only testing sources with Istanbul, covers ts files
config.module.postLoaders.push({
test: /\.ts$/,
include: path.resolve('src'),
loader: 'istanbul-instrumenter-loader',
exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
});
}
/**
* Plugins
* Reference: http://webpack.github.io/docs/configuration.html#plugins
* List: http://webpack.github.io/docs/list-of-plugins.html
*/
config.plugins = [
// Define env variables to help with builds
// Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
// Environment helpers
'process.env': {
ENV: JSON.stringify(ENV)
}
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
})
];
if (!isTest && !isProd) {
config.plugins.push(new DashboardPlugin());
}
if (!isTest) {
config.plugins.push(
// Generate common chunks if necessary
// Reference: https://webpack.github.io/docs/code-splitting.html
// Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
new CommonsChunkPlugin({
name: ['vendor', 'polyfills']
}),
// Inject script and link tags into html files
// Reference: https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
template: './src/public/index.html',
chunksSortMode: 'dependency'
}),
// Extract css files
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Disabled when in test mode or not in build mode
new ExtractTextPlugin('css/[name].[hash].css', {disable: !isProd})
);
}
// Add build specific plugins
if (isProd) {
config.plugins.push(
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
// Only emit files when there are no errors
new webpack.NoErrorsPlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
// Dedupe modules in the output
new webpack.optimize.DedupePlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
// Minify all javascript, switch loaders to minimizing mode
new webpack.optimize.UglifyJsPlugin({
mangle: { keep_fnames: true },
compress: {
warnings: false,
},
}),
// Copy assets from the public folder
// Reference: https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([{
from: root('src/public')
}])
);
}
/**
* PostCSS
* Reference: https://github.com/postcss/autoprefixer-core
* Add vendor prefixes to your css
*/
config.postcss = [
autoprefixer({
browsers: ['last 2 version']
})
];
/**
* Sass
* Reference: https://github.com/jtangelder/sass-loader
* Transforms .scss files to .css
*/
config.sassLoader = {
//includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
};
/**
* Apply the tslint loader as pre/postLoader
* Reference: https://github.com/wbuchwalter/tslint-loader
*/
config.tslint = {
emitErrors: false,
failOnHint: false
};
/**
* Dev server configuration
* Reference: http://webpack.github.io/docs/configuration.html#devserver
* Reference: http://webpack.github.io/docs/webpack-dev-server.html
*/
config.devServer = {
contentBase: './src/public',
historyApiFallback: true,
quiet: true,
stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
};
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
}
}
What is causing this error when upgrading to devextreme 16.2.x. The app is up and running fine with devextreme 16.1.7.
source to share
The problem is in Windows environment, we need to allocate more memory in the webpack / node process
in node_modules /. bin / webpack.cmd (install 8GB memory)
@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" %*
)
source to share
As Filipe Silva recommends in the angular-cli repository , add a new entry to scripts
your file section package.json
:
"ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",
and use it like this:
npm run ng-high-memory --
Remember to use the double slash in front of the arguments, otherwise they may not be parsed correctly:
npm run ng-high-memory -- serve
source to share