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,
}),
],
},
});
npm run build. In my edits I added the webpack config files for our production build.%varname%vs$varname). The content of the js files probably doesn't matter here.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/…