I have been struggling with this for a while now and have been on through Goolgle and think the issue is that I need to use the --max-old-space-size= which I have tried in several different places but keep ending up with FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

My application has the following package.json configuration:

{
  "scripts": {
    "high-memory": "node -r ts-node/register",
    "lint": "tslint --exclude=node_modules/** **/*.ts",
    "generate:client": "npm run high-memory -- ./swagger/generate-client.ts --baseApiUrl=http://localhost:5003",
    "generate:client:prod": "npm run high-memory -- ./swagger/generate-client.ts --baseApiUrl=http://localhost:5003",
    "start": "npm run clean:dist && npm run generate:client && webpack",
    "clean:dist": "rimraf ./wwwroot/*",
    "build": "npm run clean:dist && npm run generate:client:prod && webpack -p"
  },
  "dependencies": {
    "@types/googlemaps": "^3.26.1",
    "@types/handlebars": "^4.0.31",
    "@types/node": "^7.0.5",
    "@types/react": "^15.0.34",
    "@types/react-dom": "^15.5.1",
    "@types/react-router": "^3.0.3",
    "@types/superagent": "^2.0.36",
    "@types/yargs": "^6.6.0",
    "assets-webpack-plugin": "^3.5.1",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "^0.10.0",
    "google-map-react": "^0.22.3",
    "handlebars": "^4.0.6",
    "mobx": "^3.1.0",
    "mobx-react": "^4.1.0",
    "moment": "^2.17.1",
    "node-sass": "^4.5.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-resize-observer": "^0.1.0",
    "react-router": "^3.0.2",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.1",
    "style-loader": "^0.13.1",
    "superagent": "^3.4.4",
    "ts-loader": "^2.2.2",
    "ts-node": "^3.1.0",
    "tslint": "^4.4.2",
    "tslint-loader": "^3.5.3",
    "tslint-react": "^3.0.0",
    "typescript": "^2.4.1",
    "url-loader": "^0.5.7",
    "webpack": "^3.1.0",
    "webpack-md5-hash": "^0.0.5",
    "yargs": "^6.6.0"
  }
}

Here is my webpack.js.config

const webpack = require('webpack');
const path = require('path');
const srcPath = path.resolve('./src');
const distPath = path.resolve('./wwwroot');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');

const config = {
  entry: {
    'index': `${srcPath}/index.tsx`
  },
  output: {
    path: distPath,
    filename: '[name].js',
    sourceMapFilename: '[file].map.json'
  },
  module: {
    rules: [
      {
        test: /\.tsx$/,
        enforce: 'pre',
        loader: 'tslint-loader',
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      },
      {
        test: /\.scss|sass$/,
        loader: ExtractTextPlugin.extract({
          loader: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml"
      },
      {
        test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader'
      }
    ]
  },

  resolve: {
    extensions: ['.ts', '.js', '.tsx', '.css', '.scss', '.sass'],
    modules: [
      path.resolve(srcPath),
      'node_modules'
    ]
  },

  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
    new webpack.optimize.ModuleConcatenationPlugin()
  ],

  devtool: 'eval'
};

module.exports = config;

I found that if I change devtool: '(none)' it will build but I fear its a temporary fix and it also makes debugging a bit difficult as well.

I have tried the following variations in the package.json

"high-memory": "node --max-old-space-size=18192 -r ts-node/register"

"high-memory": "node -r ts-node/register" --max-old-space-size=18192"

I also have also tried running the following command to start:

npm --max-old-space-size=18192 start

I have been struggling with this for a while now and have been on through Goolgle and think the issue is that I need to use the --max-old-space-size= which I have tried in several different places but keep ending up with FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

My application has the following package.json configuration:

{
  "scripts": {
    "high-memory": "node -r ts-node/register",
    "lint": "tslint --exclude=node_modules/** **/*.ts",
    "generate:client": "npm run high-memory -- ./swagger/generate-client.ts --baseApiUrl=http://localhost:5003",
    "generate:client:prod": "npm run high-memory -- ./swagger/generate-client.ts --baseApiUrl=http://localhost:5003",
    "start": "npm run clean:dist && npm run generate:client && webpack",
    "clean:dist": "rimraf ./wwwroot/*",
    "build": "npm run clean:dist && npm run generate:client:prod && webpack -p"
  },
  "dependencies": {
    "@types/googlemaps": "^3.26.1",
    "@types/handlebars": "^4.0.31",
    "@types/node": "^7.0.5",
    "@types/react": "^15.0.34",
    "@types/react-dom": "^15.5.1",
    "@types/react-router": "^3.0.3",
    "@types/superagent": "^2.0.36",
    "@types/yargs": "^6.6.0",
    "assets-webpack-plugin": "^3.5.1",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "^0.10.0",
    "google-map-react": "^0.22.3",
    "handlebars": "^4.0.6",
    "mobx": "^3.1.0",
    "mobx-react": "^4.1.0",
    "moment": "^2.17.1",
    "node-sass": "^4.5.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-resize-observer": "^0.1.0",
    "react-router": "^3.0.2",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.1",
    "style-loader": "^0.13.1",
    "superagent": "^3.4.4",
    "ts-loader": "^2.2.2",
    "ts-node": "^3.1.0",
    "tslint": "^4.4.2",
    "tslint-loader": "^3.5.3",
    "tslint-react": "^3.0.0",
    "typescript": "^2.4.1",
    "url-loader": "^0.5.7",
    "webpack": "^3.1.0",
    "webpack-md5-hash": "^0.0.5",
    "yargs": "^6.6.0"
  }
}

Here is my webpack.js.config

const webpack = require('webpack');
const path = require('path');
const srcPath = path.resolve('./src');
const distPath = path.resolve('./wwwroot');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');

const config = {
  entry: {
    'index': `${srcPath}/index.tsx`
  },
  output: {
    path: distPath,
    filename: '[name].js',
    sourceMapFilename: '[file].map.json'
  },
  module: {
    rules: [
      {
        test: /\.tsx$/,
        enforce: 'pre',
        loader: 'tslint-loader',
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      },
      {
        test: /\.scss|sass$/,
        loader: ExtractTextPlugin.extract({
          loader: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml"
      },
      {
        test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader'
      }
    ]
  },

  resolve: {
    extensions: ['.ts', '.js', '.tsx', '.css', '.scss', '.sass'],
    modules: [
      path.resolve(srcPath),
      'node_modules'
    ]
  },

  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
    new webpack.optimize.ModuleConcatenationPlugin()
  ],

  devtool: 'eval'
};

module.exports = config;

I found that if I change devtool: '(none)' it will build but I fear its a temporary fix and it also makes debugging a bit difficult as well.

I have tried the following variations in the package.json

"high-memory": "node --max-old-space-size=18192 -r ts-node/register"

"high-memory": "node -r ts-node/register" --max-old-space-size=18192"

I also have also tried running the following command to start:

npm --max-old-space-size=18192 start

• node.js
• asp-core
• -core
• webpack

• This issue seems to be related to nodejs/webpack, and initially seems to be unrelated to asp-core. It is recommended that you create a repo(without any sensitive information) that can reproduce the issue, and we will check it for you. – Jason Pan Commented Mar 28 at 1:55
• Thank you @JasonPan but my application is very large and I don't think I can easily strip out everything sensitive and I agree it is definitely seems to be related to the webpack. The issue occurs during the start and build and not while running and only seems to occurs as the project grows in size. If I back out the last change I made which was about 500 lines of code in tsx file it will build but slowly. Does that help at all? Anything else I can provide? – Josh Commented Mar 28 at 11:38

1 Answer 1

I was able to fix the issue using the following commands:

npm install -g increase-memory-limit
increase-memory-limit