为何Require.js无端抛出ScriptError？TypeScript AMD模块加载问题求助

错误信息 #

Uncaught Error: Script error for "main"
https://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:168:17)
at HTMLScriptElement.onScriptError (require.js:1738:36)

使用Require.js遵循AMD规范，通过TypeScript将所有编译后的文件合并为单个index.js，但触发上述ScriptError。按Require.js文档提示，这类错误通常关联语法问题，但确认原始TS代码无语法错误，错误报告未提供更多细节。

原始TypeScript代码 #

main.ts

import { greet } from "./greet";

export function mainmethod() {
    greet("Safari"); 
}

greet.ts

export function greet(message: string): void {
    console.log("Hello, " + message);
}

HTML加载代码 #

<html>
    <canvas id = "canvas" width = "1050" height = "625" class = "MainCanvas">     </canvas>

    <script data-main = "script/index" src = "script/require.js"> </script>

    <script>
        require(["main"], function(main) { 
            main.mainmethod();
        });
    </script>
</html>

项目结构 #

index.html 
 - script
   - index.js
   - require.js
 - sourcecode
   - main.ts
   - greet.ts
 - resources

编译后的AMD模块代码 #

define("greet", ["require", "exports"], function (require, exports) {
    exports.greet = void 0;
    function greet() {
        console.log("Hello, " + message);
    }
    exports.greet = greet;
}
define("main", ["require", "exports", "greet"], function (require, exports, greet_1) {
    exports.mainmethod = void 0;
    function mainmethod() {
        greet_1.greet("Safari");
    }
    exports.mainmethod = mainmethod;
}

问题根源 #

1. 编译后代码语法错误：生成的两个define函数都缺少闭合括号，直接导致JS语法错误，触发Require.js的ScriptError；另外greet函数内引用了未定义的message变量，也是明显错误。
2. 模块加载时机冲突：HTML中同时使用data-main指定入口和直接调用require(["main"])，data-main加载的index.js是异步执行的，后续的require调用可能在模块未加载完成时执行，导致找不到main模块。

修复方案 #

1. 修正TypeScript编译配置，生成合法AMD代码 #

检查tsconfig.json，确保配置正确：

{
  "compilerOptions": {
    "module": "amd",
    "outFile": "./script/index.js",
    "rootDir": "./sourcecode",
    "target": "es5",
    "strict": true
  }
}

重新编译后，生成的代码需包含完整的闭合括号，且greet函数正确接收参数：

define("greet", ["require", "exports"], function (require, exports) {
    "use strict";
    exports.greet = void 0;
    function greet(message) {
        console.log("Hello, " + message);
    }
    exports.greet = greet;
});
define("main", ["require", "exports", "greet"], function (require, exports, greet_1) {
    "use strict";
    exports.mainmethod = void 0;
    function mainmethod() {
        greet_1.greet("Safari");
    }
    exports.mainmethod = mainmethod;
});

2. 调整HTML加载逻辑，避免时机冲突 #

方案一：仅保留data-main，在入口文件中启动应用

修改HTML：

<html>
    <canvas id = "canvas" width = "1050" height = "625" class = "MainCanvas">     </canvas>
    <script data-main = "script/index" src = "script/require.js"> </script>
</html>

在index.js末尾添加启动代码（或在TS入口中配置）：

require(["main"], function(main) {
    main.mainmethod();
});

方案二：移除data-main，直接加载合并文件后调用模块

<html>
    <canvas id = "canvas" width = "1050" height = "625" class = "MainCanvas">     </canvas>
    <script src = "script/require.js"> </script>
    <script src = "script/index.js"> </script>
    <script>
        require(["main"], function(main) { 
            main.mainmethod();
        });
    </script>
</html>

3. 验证模块路径 #

合并后的AMD模块已指定明确模块名（"greet"、"main"），确保index.js被正确加载后，Require.js可直接通过模块名找到对应模块，无需额外路径配置。

内容的提问来源于stack exchange，提问作者Cflowe Visit