[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.

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;

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),
  });
};

{
  "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"
        }]
      ]
    }
  }
}

{
  "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*"]
}