Webpack script errors in PowerShell, but not CMD.exe

Question

I'm trying to set up CI/CD via GitHub actions and workflows. When running a build script via Windows PowerShell (with elevation), Webpack fails with the following error:

[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (d:\dev\theApp\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:138:10)
at d:\dev\theApp\node_modules\terser-webpack-plugin\dist\index.js:566:67
at _next30 (eval at create (d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10),
:44:1)
at _next8 (eval at create (d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10),
:97:1)
at Hook.eval [as call] (eval at create (d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10),
:117:1)
at Hook.CALL_DELEGATE [as _call] (d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (d:\Dev\theApp\node_modules\webpack\lib\Compiler.js:1044:26)
at d:\Dev\theApp\node_modules\webpack\lib\Compiler.js:1088:29
at Hook.eval [as callAsync] (eval at create (d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10),
:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (d:\Dev\theApp\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)

This does not occur when run from an elevated instance of CMD.exe. Setting the shell parameter for the step in the GitHub workflow to "cmd" still fails as the runner service uses PowerShell to launch cmd.exe with the command as an argument.

npm script from file package.json

"build": "webpack --config webpack.prod.js",

File Webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(m?js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader',
      },
    ],
  },
  entry: './src/index.jsx',
  output: {
    path: __dirname + '/../dist/theApp',
    chunkFilename: '[chunkhash].[name].bundle.js',
    publicPath: '/',
    filename: '[name].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'TheApp',
      filename: 'default.aspx',
      template: './default.html',
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.es6'],
  },
};

File webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new CleanWebpackPlugin(),
  ],
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 100000,
      minRemainingSize: 50000,
      maxSize: 500000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 5,
      automaticNameDelimiter: '~',
      enforceSizeThreshold: 500000,
      cacheGroups: {
        utils: {
          minChunks: 1,
          test: /[\\/]node_modules[\\/](moment|lodash)[\\/]/,
          name: 'utils',
          chunks: 'all',
          priority: 0,
        },
        defaultVendors: {
          minChunks: 1,
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 1,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
    minimize: true,
    minimizer: [
      new TerserPlugin({
        test: /\.js(\?.*)?$/i,
      }),
    ],
  },
});

What are the actual commands getting run in cmd/powershell? That error tends to be more related to bad paths/environment variables — Cpt.Whale, Jul 12 '21 at 18:32
@Cpt.Whale The path/env variables was the first thing that came to mind for me as well. I verified both are the same between the command prompt and powershell. The command is just `npm run build`. In my edits I added the webpack config files for our production build. — Raythe, Jul 13 '21 at 12:14
Also, I verified that I don't have any modules installed globally. — Raythe, Jul 13 '21 at 12:24
Can you find the actual command and argument that gets fed to cmd/powershell? For example, cmd can handle quoted parameters a bit differently, and processes different special characters than powershell (e.g. `%varname%` vs `$varname`). The content of the js files probably doesn't matter here. — Cpt.Whale, Jul 14 '21 at 14:50
Separately, can you check the output of `npm ls webpack`? The overwhelmingly common cause of this error is having either multiple copies of webpack or multiple dependencies on it. Not that it explains why it your project behaves differently between cmd and powershell... https://github.com/angular/angular-cli/issues/20773#issuecomment-845426252 — Cpt.Whale, Jul 14 '21 at 14:55
Yeah, I had seen those same posts as well and audited it when this first began. I ran `npm ls webpack` as suggested. This was the result: ```+-- react-scripts@4.0.3 | `-- UNMET PEER DEPENDENCY webpack@4.44.2 `-- webpack@5.44.0 npm ERR! peer dep missing: webpack@^4.0.0, required by optimize-css-assets-webpack-plugin@5.0.4 npm ERR! peer dep missing: webpack@2 || 3 || 4, required by webpack-manifest-plugin@2.2.0 npm ERR! peer dep missing: webpack@^4.0.0, required by workbox-webpack-plugin@5.1.4``` — Raythe, Jul 14 '21 at 15:20
my advice is to use `.ps` script. When you'll manage to run it(it's not so easy) then you'll have all stuff elevated well — Алексей Неудачин, Jul 21 '21 at 11:20
Unfortunately, I've tried that as well with the same results. What I found last night is if I disable the terser plugin, it builds. — Raythe, Jul 21 '21 at 11:24

score 5 · Answer 1 · edited Sep 17 '22 at 09:20

I also encountered this error with Webpack. I solved the problem by adding camelCase letters into the path to the directory in which the command is executed.

The problem is not with Webpack, but with Windows, specifically with PowerShell and the way case sensitivity is handled. The error is not returned if you use another command prompt.

Let's take the following case:

I develop an application in the directory:

C:\Users\username\Desktop\myApp

I compile the assets of this application with Webpack. The Compilation type error is triggered if I execute the npm run dev command in c:\users\username\desktop\myapp because Webpack can't find the node_modules folder. To fix the error, you just have to run your command into the right directory with also camelCase letters.

C:\Users\username\Desktop\myApp> npm run dev

Webpack should find the node_modules folder and you won't have any more errors.

Thank you! I've spent hours tracking this down. Just... wow. — flytzen, Aug 10 '22 at 20:30

Webpack script errors in PowerShell, but not CMD.exe

npm script from file package.json

File Webpack.common.js

File webpack.prod.js

1 Answers1