Cannot make React 18 (production, UMD) work with SystemJS

[noherczeg]

• SystemJS Version: 6.13.0
• Which library are you using?
  • system.js
  • s.js
  • system-node.cjs
• Which extras are you using?
  • AMD extra
  • Named Exports
  • Named Register
  • Transform
  • Use Default
  • Global
  • Dynamic Import Maps
• Are you using any custom hooks?

Question

I created a test repository: https://github.com/noherczeg/system-react where I wanted to play around with React 18 + SystemJS, but cannot make it work.

One of the main problems is that React moved away from the old jsx-runtime, and now it relies on compile-time magic in traditional (CJS-ish?) environments.

The current state of the demo repo produces "react-dom.production.min.js:218 Uncaught TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')".

It is IMPORTANT to note, that our aim is to use the production version of both React and React DOM!

I have identified two options which I could play with:

• Comment out commonjs(), and nodeResolve() in the rollup configs
• Remove the external section from the Rollup config.

In the first scenario I get a runtime error of: "Uncaught (in promise) Error: Unable to resolve bare specifier 'react/jsx-runtime' from http://localhost:3000/index.js"

After this I "redundantly" added the following to the import map:

        {
            "imports": {
                // other stuff which I didn't touch
                "react/jsx-runtime": "./react@18.2.0/umd/react.production.min.js",
                "react-dom/client": "./react-dom@18.2.0/umd/react-dom.production.min.js"
            }
        }

But then I get these errors:

• "Uncaught TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')"
• "material-ui.production.min.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'useLayoutEffect')"

(The second error comes from MUI)

This must be super simple to set up, but I spent 4 hours with this topic without success, can anyone please help me out?

Thanks,
Norbert

[noherczeg]

Topic is similar to #2389

[noherczeg]

Okay so after some random refresh in the browser, it turns out that the load order in which packages arrive seem to cause the issue. Some times the app works, sometimes MUI throws error and/or sometimes react-dom throws the error.

I'll check if it's possible to define dependencies between dependencies and/or enforce a load order in systemjs.

[noherczeg]

Throttling the network to "Fast 3G" eliminates all issues, confirmed:

[noherczeg]

Okay, found the actual issue: I did not load extras/amd.min.js.

Issue should be considered as RESOLVED.

If anyone else faces similar issues in the future, they can check the demo repo at: https://github.com/noherczeg/system-react