Reacr Single SPA Micro frontend executes old scripts after a fresh deployment

351 views Asked by At

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 !

0

There are 0 answers