CODEWITHSUNDEEP
reactjspowershellwebpack
Raythe
Raythe

Reputation: 472

Webpack script errors in PowerShell, but not CMD.exe

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,
      }),
    ],
  },
});

Upvotes: 5

Views: 926

Answers (1)

Titouan Thd
Titouan Thd

Reputation: 323

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.

Upvotes: 5

Related Questions