Angular 13 - Uncaught SyntaxError: application died in status LOADING_SOURCE_CODE: Unexpected...

I am using Single-SPA-angular version 4.0.0 in micro-front-end and Single-SPA in Root application. My package.json contains below packages for webpack :

"webpack": "5.97.1",
"webpack-cli": "^4.9.2",
"webpack-config-single-spa": "^4.0.0",
"webpack-dev-server": "4.8.1",
"webpack-merge": "^5.0.0"


I am using below webpack.config.js: //

/* eslint-disable prettier/prettier */
const webpackMerge = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = (webpackConfigEnv) => {
const defaultConfig = singleSpaDefaults({
orgName: "my-org",
projectName: "root-config",
webpackConfigEnv,
});

return webpackMerge.merge(defaultConfig, {
// modify the webpack config however you'd like to by adding to this object
devServer: {
proxy: {
// header
'/my-org/my-org-header/main': {
target: 'http://localhost:4203',
pathRewrite: { '^/my-org/my-org-header/main': '' }
},
// reconciliation
'/my-org/main': {
target: 'http://localhost:4202',
pathRewrite: { '^/my-org/main': '' }
}
},
historyApiFallback: true,
static: "./src",
headers: {
'Access-Control-Allow-Origin': '*',
}
},
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: "src/index.ejs",
templateParameters: {
isLocal: webpackConfigEnv && webpackConfigEnv.isLocal === "true",
},
}),
],
});
};


// It is working fine in my localhost but when I deployed the application to Azure Devops I am getting below error: Uncaught SyntaxError: application died in status LOADING_SOURCE_CODE: Unexpected token '<'

Not sure how to resolve this error.

Continue reading...