Heap out of memory

[carlosnufe]

Hello all,

Last week I ran into a JavaScript heap out of memory issue. The project I'm working on has become large. Since last merge I'm not able to process all the files with webpack.

I'm using webpack 5, and the configuration is this

(...)
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';
(...)
module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        loader: 'ts-loader',
        exclude: ['/node_modules/'],
      },
      {
        test: /\.css$/i,
        use: [stylesHandler, 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: 'asset',
      },
    ],
  },
 (...)

I've tried vite and works, but I wonder if it would be a matter of time to happen the same. Am I missing or doing anything wrong on the webpack config?

My system specs are:
MBP M1
16GB RAM
OS X 12.0.1

[carlosnufe]

hello there, after some research, I found two solutions.

The first solution is to increase the node memory

NODE_OPTIONS=<memory in MB>

The second one is to use the option transpileOnly: true for the ts-loader on the webpack configuration altogether with the fork-ts-checker-webpack-plugin plugin dependency.

(...) // more imports
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');


(...) // start webpack configuration
  module: {
    (...)
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        exclude: ['/node_modules/'],
        use: {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
          },
        },
      },
      (...)
    ]
  },
  plugins: [
    (...)
    new ForkTsCheckerWebpackPlugin(),
  ]
(...) // rest of the webpack configuration 

The second option works better (and faster) check out why