Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
alexanderbartl opened this issue May 14, 2024 · 0 comments
Open

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

alexanderbartl opened this issue May 14, 2024 · 0 comments

Comments

@alexanderbartl
Copy link

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@alexanderbartl