5

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,
      }),
    ],
  },
});
8
  • 6
    What are the actual commands getting run in cmd/powershell? That error tends to be more related to bad paths/environment variables Commented Jul 12, 2021 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. Commented Jul 13, 2021 at 12:14
  • Also, I verified that I don't have any modules installed globally. Commented Jul 13, 2021 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. Commented Jul 14, 2021 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... github.com/angular/angular-cli/issues/… Commented Jul 14, 2021 at 14:55

1 Answer 1

5
+200

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you! I've spent hours tracking this down. Just... wow.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.