Wrong module content when importing latest react-router-dom versions

Question

Wrong module content when importing latest react-router-dom versions

alexanderbartl opened this issue 2 months ago · comments

We are using SystemJS for our React micro-frontend SPA. Recent updates of react-router-dom broke our setup. The minimal examples below lead me to believe that the issue is on SystemJS' side rather than ours or that of react-router-dom.

Demonstration

Here is a minimal example of broken code:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/systemjs@6.15.1/dist/system.js"></script>
</head>
<body>
  <script>
    (async () => {
      await System.import("https://unpkg.com/react@18.3.1/umd/react.production.min.js")
      await System.import("https://unpkg.com/@remix-run/router@1.16.0/dist/router.umd.min.js")
      await System.import("https://unpkg.com/react-router@6.23.1/dist/umd/react-router.development.js")
      const module = await System.import("https://unpkg.com/react-router-dom@6.23.1/dist/umd/react-router-dom.development.js")
      console.log(Object.keys(module))
      console.log(window.__reactRouterVersion)
    })()
  </script>
</body>
</html>

This logs the following keys: ['6', 'default', '__useDefault'] - in particular, none of the actual exports of the module.

Expected Behavior

The module should have all the expected exports. This works fine with versions <6.22.0 of react-router-dom, so if you change 6.23.1 to e.g. 6.21.3 above.

It also works fine with this non-SystemJS version of the minimal example, again using UMD builds:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/@remix-run/router@1.16.0/dist/router.umd.min.js"></script>
  <script src="https://unpkg.com/react-router@6.23.1/dist/umd/react-router.development.js"></script>
  <script src="https://unpkg.com/react-router-dom@6.23.1/dist/umd/react-router-dom.development.js"></script>
</head>
<body>
  <script>
    console.log(Object.keys(window.ReactRouterDOM))
    console.log(window.__reactRouterVersion)
  </script>
</body>
</html>

Actual Behavior

See Demonstration.

Initial Analysis

The problem is the introduction of the following code snippet in the react-router-dom code:

const REACT_ROUTER_VERSION = "6";
try {
  window.__reactRouterVersion = REACT_ROUTER_VERSION;
} catch (e) {
  // no-op
}

It looks like any kind of write access on the window object leads to similar results. If I change the value of the version, the resulting module changes accordingly. I also tried Object.assign, leading to the same result.
The code itself looks harmless though, leading me to believe that the issue is on the SystemJS side. Unfortunately, I lack the detailed knowledge to debug the SystemJS internals and would therefore appreciate your support.