Process out of memory - Webpack

[andrewhathaway]

After a couple of builds running in a Watch, Webpack crashes due to being out of memory.

<--- Last few GCs --->

 9223585 ms: Scavenge 1390.0 (1454.7) -> 1390.0 (1454.7) MB, 9.0 / 0 ms (+ 0.7 ms in 1 steps since last GC) [allocation failure] [incremental marking delaying mark-sweep].
 9224727 ms: Mark-sweep 1390.0 (1454.7) -> 1388.3 (1452.7) MB, 1142.7 / 0 ms (+ 9.8 ms in 89 steps since start of marking, biggest step 2.5 ms) [last resort gc].
 9225694 ms: Mark-sweep 1388.3 (1452.7) -> 1388.8 (1454.7) MB, 966.6 / 0 ms [last resort gc].


<--- JS stacktrace --->

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

Security context: 0x35903c44a49 <JS Object>
    1: walkFunctionDeclaration [<PROJECT_DIR>/node_modules/webpack/lib/Parser.js:~443] [pc=0xa07a14ec8ee] (this=0x59f67991119 <a Parser with map 0x71f2d115d49>,statement=0x3507a80af661 <a Node with map 0x71f2d1157c9>)
    2: walkStatement [<PROJECT_DIR>/node_modules/webpack/lib/Parser.js:~348] [pc=0xa07a06dfc10] (this=0x59f6799111...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory
Abort trap: 6

[SpaceK33z]

I'm having this too with webpack-dev-server on Debian; but I haven't had time to debug this further.
Do you have a minimal webpack config where you can reproduce this? It could also be an external loader or plugin.

[sokra]

Don't use hashes when watching. i. e. [chunkhash] causes all assets to be stored.

[SimenB]

@sokra In the documentation for css-loader it says to use hash for easier debugging wrt css modules. Does that have the same problem?

You can configure the generated ident with the localIdentName query parameter (default [hash:base64]). Example: css-loader?localIdentName=[path][name]---[local]---[hash:base64:5] for easier debugging.

We've also started to see this problem in dev (out of memory), but our only hash in dev mode is the css one.

EDIT: Of course it uses hash by default, so I'm guessing it's not a problem.

[sokra]

Does that have the same problem?

No. Only filenames.

You can compare it with webpack --watch. If this generates many files in to your output path, the webpack-dev-server generates many files in the memory-fs.

If this is not the issue, you can increase the node.js memory (it defaults to 1.7 GB, which can be too few for big builds).

[SimenB]

I'll test at work on Monday! If the outputted file is of the same name as the old one, then it's overwritten, right?

[sokra]

jup.

You can navigate to http://localhost:8080/webpack-dev-server to see a list of all files in memory.

[SimenB]

Ah, didn't know that! Using a small project I have on my own computer, I notice that all of the hot-update files gets added.

Could they be a problem? Any way of clearing them out after they've been there for x amount of time? If we develop for a few hours there's probably quite a few of them in the end

[sokra]

Could they be a problem?

They could, but they are usually pretty small.

[SpaceK33z]

I think clearing them out like @SimenB said would be a nice option, or maybe there is some way to delete all in-memory files that are no longer in use?

[sokra]

jup. Write a plugin...

[sokra]

But deleting them too early can break stuff...

[deepakmani]

We have the exact same memory leak problem after using webpack -w on MacOS X. Can you please suggest what is a the best way to fix / workaround this issue. The ngOfficeUIFabric seems to deal with a different problem.

Thanks,
Deepak

[luchillo17]

Have same issue of @deepakmani in OSX El Capitan, however i'm using Ionic 2 which in it's config doesn't use css-loader, instead it just uses ionic-gulp-sass-build, so ikd if the error happens because of webpack or that gulp plugin, also i'm not using HRM:

const path = require('path')
const PrefetchPlugin = require('webpack/lib/PrefetchPlugin')
const ProvidePlugin = require('webpack/lib/ProvidePlugin')
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin')
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
const WebpackNotifierPlugin = require('webpack-notifier')


module.exports = {
  entry: {
    polyfills: './app/polyfills.ts',
    vendor: './app/vendor.ts',
    app: path.resolve('app/app')
  },
  output: {
    path: path.resolve('www/build/js'),
    filename: '[name].bundle.js',
    publicPath: "/",
    chunkFilename: "[id].bundle.js",
    pathinfo: false, // show module paths in the bundle, handy for debugging
  },
  devtool: 'eval',
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript',
        query: {
          doTypeCheck: true,
          resolveGlobs: false,
          externals: ['typings/main.d.ts']
        },
        include: path.resolve('app'),
        exclude: /node_modules/
      }
      ,{
        test: /\.js$/,
        include: path.resolve('node_modules/angular2'),
        loader: 'strip-sourcemap'
      }
    ],
    noParse: [
      /es6-shim/,
      /reflect-metadata/,
      /zone\.js(\/|\\)dist(\/|\\)zone/
    ]
  },
  plugins: [
    new PrefetchPlugin('rxjs'),
    new ProvidePlugin({
      Chart: 'chart.js/Chart.min.js'
    }),
    new DedupePlugin()
    // ,new UglifyJsPlugin({
    //    // to debug prod builds uncomment //debug lines and comment //prod lines
    //   // beautify: true,//debug
    //   // mangle: false,//debug
    //   // dead_code: false,//debug
    //   // unused: false,//debug
    //   // deadCode: false,//debug
    //   // compress : { screw_ie8 : true, keep_fnames: true, drop_debugger: false, dead_code: false, unused: false, }, // debug
    //   // comments: true,//debug

    //   beautify: false,//prod
    //   // disable mangling because of a bug in angular2 beta.1, beta.2 and beta.3
    //   // TODO(mastertinner): enable mangling as soon as angular2 beta.4 is out
    //   // mangle: { screw_ie8 : true },//prod
    //   mangle: false,
    //   // dead_code : true,
    //   compress : { 
    //     dead_code : true,
    //     screw_ie8 : true
    //   },//prod
    //   comments: false//prod
    // })
    ,new WebpackNotifierPlugin({
      title: 'tao_app_ionic',
      alwaysNotify: true
      // contentImage: path.join(appDir, 'images/notifier.png')
    })
  ],
  resolve: {
    alias: {
      'angular2': path.resolve('node_modules/angular2')
    },
    extensions: ['', '.js', '.ts']
  }
};