HMR Logs Indicate Success, but React Component Doesn't Update in Single-SPA

[hsingh-ds]

First of all, thank you for creating this fantastic library!

I’m currently using single-spa with React and encountering an issue with HMR (Hot Module Replacement). While the console logs indicate that HMR is working, the component itself does not update as expected.

I have followed all the troubleshooting steps provided in the troubleshooting guide, but unfortunately, I haven’t had any success so far. Could you please let me know if there are any additional configurations or changes required to make this work?

Thank you in advance for your help!

[webpack-dev-server] App updated. Recompiling...
index.js:577 [webpack-dev-server] App hot update...
log.js:39 [HMR] Checking for updates on the server...
log.js:39 [HMR] Updated modules:
log.js:39 [HMR]  - ./src/root.component.tsx
log.js:39 [HMR] App is up to date.

Here is my root component.

import { useState } from "react";

function Root(props) {
 const [counter, setCounter] = useState<number>(0)
  // @ts-ignore
  return (<div style={{display: 'flex', flexDirection: 'column'}}>
               <p>Test Fast {counter}</p>
               <button onClick={() => setCounter(c => c+1)}>
                   Add
               </button>
           </div>);
}

export default Root;

These are configs I am using,

webpack.config.ts

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react-ts");
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "testorg",
    projectName: "app1",
    webpackConfigEnv,
    argv,
  });
  const isDevelopment = defaultConfig.mode !== 'production';
  console.log("isDevelopment", isDevelopment)
  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object.
    mode: isDevelopment ? 'development' : 'production',
    devServer: {
      hot: true,
    },
    module: {
      rules: [
        {
          test: /\.[jt]sx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: require.resolve('babel-loader'),
              options: {
                plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
              },
            },
          ],
        },
      ],
    },
    plugins: [isDevelopment && new ReactRefreshWebpackPlugin({
      library: 'YourLibrary',
    })].filter(Boolean),
  });
};

babel.config.json

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    [
      "@babel/preset-react", 
      {
        "development": true,
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "useESModules": true,
        "regenerator": false
      },
      "react-refresh/babel"
    ]
  ],
  "env": {
    "test": {
      "presets": [
        ["@babel/preset-env", {
          "targets": "current node"
        }]
      ]
    }
  }
}

tsconfig.json

{
  "extends": "ts-config-single-spa",
  "compilerOptions": {
    "jsx": "react-jsx",
    "declarationDir": "dist",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "ESNext",
    "moduleResolution": "node",
    "outDir": "dist",
    "target": "ESNext",
    "sourceMap": true
  },
  "files": ["src/defensestation-app1.tsx"],
  "include": ["src/**/*"],
  "exclude": ["src/**/*.test*"]
}