We are migrating a standalone React.js application into micro frontend architecture using the library react-single-spa
https://single-spa.js.org/docs/ecosystem-react/
We noticed a problem that after a new deployment to any micro-frontend app, the Single SPA was still loading the old code. I assume it is because, the browser caches the scrips . Is there's a way to make sure latest version of the code is being used ? Or is there a sample on how to implement this? Below is my current webpack configs.
root-config
const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = (webpackConfigEnv, argv) => {
const orgName = "my-org";
const defaultConfig = singleSpaDefaults({
orgName,
projectName: "root-config",
webpackConfigEnv,
argv,
disableHtmlGeneration: true,
});
return merge(defaultConfig, {
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: "src/index.ejs",
templateParameters: {
isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
orgName,
},
}),
],
});
};
app-config
const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react");
const path = require("path");
module.exports = (webpackConfigEnv, argv) => {
const defaultConfig = singleSpaDefaults({
orgName: "my-org",
projectName: "my-app",
webpackConfigEnv,
argv,
});
return merge(defaultConfig, {
resolve: {
fallback: {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify")
},
extensions: ['.ts', '.js', 'mjs', '.tsx'],
alias: {
src: path.resolve(__dirname, 'src'),
}
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.(woff|woff2|ttf|eot)$/,
use: 'file-loader?name=fonts/[name].[ext]!static'
}
]
}
});
};
Appreciate any help. Thank you !