SystemJS配合Import Maps使用时无法加载react、react-dom依赖问题

• Import Map配置加载顺序错误：SystemJS仅会识别业务模块加载触发前已声明的importmap规则。现有代码先触发了main.js的加载（带type="systemjs-module"属性的脚本会被SystemJS立即接管执行加载流程），之后才声明react、react-dom的CDN映射规则，SystemJS解析main.js依赖时拿不到对应地址，因此不会发起资源请求。
• 模块写法存在两处错误：
  1. 通过script标签直接引入的SystemJS模块，不需要在System.register中手动传入硬编码的模块名（即代码中第一个参数'myBundle'），该参数仅用于多个模块打包到同一个文件的场景，单独加载文件时硬写模块名会干扰依赖解析逻辑。
  2. React、ReactDOM的UMD生产包未提供ES模块规范的default导出，现有代码在setter中读取module.default会得到undefined，即便依赖加载成功也会触发运行时报错。

1. 调整index.html脚本加载顺序 #

将importmap配置移动到SystemJS库文件加载完成后、main.js业务模块加载前，修正后核心代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Import Maps</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.7/runtime.min.js"></script>
</head>
<body>
    <div id="root"></div>
    
    <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.2.0/dist/import-map-overrides.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/amd.js"></script>
    <!-- importmap配置需放在所有业务模块加载之前 -->
    <script type="systemjs-importmap">
            {
              "imports": {
                "react": "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
                "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"
              }
            }
    </script>
    <!-- 配置完成后再加载业务入口 -->
    <script type="systemjs-module" src="main.js"></script>
</body>
</html>

2. 修正main.js的模块注册逻辑 #

移除硬编码的模块名，调整依赖取值逻辑，修正后代码如下：

// 移除第一个硬编码的'myBundle'模块名参数
System.register(['react', 'react-dom'], function () {
    var React, ReactDOM;
    return {
        setters: [
            function (module) {
                // UMD版本React直接导出整个模块对象，无需读取.default属性
                React = module;
            },
            function (module) {
                ReactDOM = module;
            },
        ],
        execute: function () {
            const HelloComponent = () => {
                return React.createElement(
                    'h1',
                    null,
                    'Hello World'
                );
            };

            ReactDOM.render(
                React.createElement(HelloComponent, null),
                document.getElementById('root')
            );
        },
    };
});

修改完成后刷新页面，即可在网络面板看到react、react-dom的加载记录，页面正常渲染Hello World内容。

内容的提问来源于stack exchange，提问作者Muhammad Usman