Problem with the hot-reload in Atlassian WRM webpack plugin (for Data Center)

Jira Development Jira Server
9

This is my devServer config for webpack5

devServer: {
      hot: true,
      compress: true,
      host: host,
      port: port,
      allowedHosts: "all",
      https: {
        key: fs.readFileSync("./../certs/dev.local.key"),
        cert: fs.readFileSync("./../certs/dev.local.crt"),
      },

      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods":
          "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers":
          "X-Requested-With, content-type, Authorization",
      },
    },
    ignoreWarnings: [/only default export is available soon/],

I use GitHub - pmmmwh/react-refresh-webpack-plugin: A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components. in combination with SWC instead of babel.

{
          test: /\.(js|jsx|tsx|ts)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "swc-loader",
              options: {
                jsc: {
                  transform: {
                    react: {
                      development: argv.mode === "development",
                      refresh: argv.mode === "development",
                    },
                  },
                },
              },
            },
          ],
        },

stefanernst@dev ~/r/s/js (main)> cat .swcrc
[{
     "test": ".tsx?$",
     "jsc": {
       "parser": {
         "syntax": "typescript",
         "tsx": true,
         "decorators": false,
         "dynamicImport": true
       },
       "transform": {
         "react": {
           "refresh": true
         }
       }
     }
   },
{
    "test": ".jsx?$",
    "jsc": {
      "parser": {
        "syntax": "ecmascript",
        "jsx": true,
        "decorators": false,
        "dynamicImport": true
      },
      "transform": {
        "react": {
          "refresh": true
        }
      }
    }
  }
]

I do not use code splitting, I just manually control my entrypoints and the resulting js files. This gives you also the opportunity to move away from the WRM plugin. You can simply copy the wr-defs.xml output to your atlassian-plugin.xml and be done with it. If you want to move to vite in the future, its easier. The less moving parts, the better.

2 Likes