vue 3 build + webpack causes JavaScript heap out of memory

Question

In my local build environment, there are some directories at the base directory where my webpack config is. These directories contain quite a few files (they are other applications that are part of our debugging environment).

node_modules/
src/
src/components
dir1/
dir2/
webpack.config.js
packages.json

I am using exclude to exclude the dir1 and dir2 , but this doesn't help. The build does complete if I remove these directories completely. So it seems that whatever is consuming all the memory is running before the 'exclude' rule is applied. Note, I am not interested in increasing the memory limit of node, I don't think that is real problem. I'd prefer not to have to do some magic with logical file links.

Any ideas?

I suspect the problem is actually with vue-loader plugin, but I can't be sure because i don't see any error other then the dump, even when I use 'verbose' flag in webpack.

Below is my webpack config (I am using grunt to initiate the build). exclude and include contain absolute path to the files (include) or the directories to exclude (exclude). I also tried exclude with regular expressions.

I also added the relevant parts of my package.json

rules: [
        {
          test: /(\.ts$|\.js$)/,
          exclude,
          include,
          use: [
            {
              loader: 'ts-loader',
            },
          ],
        }, {
          exclude,
          test: /\.vue$/,
          use: 'vue-loader'
        }, {
          exclude,
          test: /\.css$/,
          use: ['vue-style-loader', 'css-loader']
        }

      ],

"devDependencies": {
    "css-loader": "^6.5.1",
    "@vue/compiler-sfc": "^3.2.29",
    "grunt": "^1.4.1",
    "grunt-bump": "^0.8.0",
    "grunt-cli": "^1.4.3",
    "grunt-webpack": "^5.0.0",
    "jsdom": "^19.0.0",
    "npm": "^8.3.2",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "vue": "^3.2.29",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.67.0"
  }

Error:

<--- Last few GCs --->

[30416:000002A93B75B4D0]    82287 ms: Mark-sweep (reduce) 4094.2 (4101.3) -> 4093.9 (4103.1) MB, 2689.3 / 0.0 ms  (average mu = 0.091, current mu = 0.004) allocation failure scavenge might not succeed
[30416:000002A93B75B4D0]    86891 ms: Mark-sweep (reduce) 4094.9 (4105.1) -> 4094.6 (4105.6) MB, 4588.9 / 0.0 ms  (average mu = 0.037, current mu = 0.003) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF7BD3E046F napi_wrap+109311

Answer 1

Either you have too many files or you have few files that are too large. The only thing you can do is try increasing the memory quota using the node flag --max-old-space-size .

Before running the Webpack, set the memory options using environment variables:

// 8GB of memory
NODE_OPTIONS=--max_old_space_size=8192

And, then run your Webpack command. Alternately, you can also use:

node --max-old-space-size=8192 ./node_modules/webpack/bin/webpack.js

Answer 2

The problem turned out to be my tsconfig.json. There is also an exclude rule in that file. Next time I opened VS Code, it reminded me to check that file for excludes. It knew, Once I added the large directory to the tsconfig exclude rule. the problem went away.

So I guess this doesn't have to do with vue or vue-loader or even webpack specifically (unless one of those also uses the tsconfig). But I didn't think of this, because mine is a pure.js app and prior to vue, there was no need for tsconfig.

I also realize I didn't include that config in my question:

{
  "compilerOptions": {
    "target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
    "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    "allowJs": true /* Allow javascript files to be compiled. */,
    "sourceMap": true,
    "outDir": "./build",
    "baseUrl": ".",
    "declaration": false,
    "strict": true /* Enable all strict type-checking options. */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
    "moduleResolution": "node",
    "lib": ["dom", "es2017"],
    "removeComments": false
  },
  "exclude": ["node_modules", "ise", "bin", "obj", "kite"]
}