Issue with react app webpack5 configuration when creating build pipelines in azure devops

Question

Below is my build command,

 "build": "webpack --mode=production --config webpack.prod.js",

Below is my webpack related packages,

"webpack": "^5.11.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.7.3"

Below is webpack.prod.js,

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
mode: 'production',
});

In local build command is working fine but Getting below error in pipelines,

[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (....\Web\ClientApp\node_modules\webpack\lib\NormalModule.js:171:10)
at ...\Web\ClientApp\node_modules\webpack\lib\HotModuleReplacementPlugin.js:705:18

Answer 1

Usually, local build environment is different from Microsoft-hosted agents , so if your project build result depends on build environment, you'd better deploy self-hosted agents , which will run on your local environment.

If you still want to use Microsoft-hosted agents , you can see the installed software for each hosted agent by choosing the Included Software link in the table. And then compare it with local build environment, to decide to install other required software/libraries/packages or specific software version to build your project.