Chrome插件中TypeScript文件内函数调用报错原因咨询

你遇到的Uncaught Reference error: 'myNonExportedFunction' is not defined错误，核心原因是TypeScript/Webpack的配置与Chrome插件运行环境不兼容，导致同文件内的未导出函数在打包后未被正确保留或引用。以下是具体原因和解决办法：

1. TypeScript模块配置不匹配Chrome插件环境 #

你的tsconfig.json中设置了"module": "Node16"和"moduleResolution": "Node16"，这是针对Node.js环境的模块格式，而Chrome插件的脚本（Content Script、Background等）运行在浏览器沙箱环境，这类Node.js专属的模块解析逻辑会导致打包后的代码无法正确识别内部函数引用。

解决办法：
修改tsconfig.json的编译选项：

{
  "compilerOptions": {
    // ... 其他配置
    "module": "ESNext",
    "moduleResolution": "Bundler"
    // ... 其他配置
  }
}

ESNext模块格式更适合浏览器环境，Bundler解析模式会让TypeScript配合Webpack等打包工具正确处理模块依赖。

2. Webpack未针对Chrome插件环境优化 #

Webpack默认的target是通用浏览器环境，但Chrome插件有特殊的运行规则（比如Content Script的沙箱隔离、Background的生命周期），未指定webextension target会导致打包后的代码不符合插件要求。

解决办法：
在webpack.config.js中添加target配置：

module.exports = {
  target: 'webextension',
  // ... 其他原有配置
};

这个target会让Webpack自动适配浏览器扩展的代码规范，避免环境不兼容导致的函数引用丢失。

3. Tree Shaking误删未导出函数（可能性较低） #

如果你的Webpack开启了Production模式的Tree Shaking，极端情况下可能误将同文件内的未导出函数判定为“无用代码”而删除。

解决办法：
暂时禁用Tree Shaking测试是否解决问题：

module.exports = {
  // ... 其他配置
  optimization: {
    usedExports: false,
    sideEffects: false
  }
};

如果问题消失，再调整代码或配置让Webpack识别该函数的引用（比如确保函数调用在导出函数的作用域内被明确使用）。

4. IsolatedModules选项的潜在冲突 #

tsconfig.json中的"isolatedModules": true要求每个文件作为独立模块编译，虽然同文件内的函数引用符合规范，但ts-loader与该选项的组合可能编译出异常代码。

解决办法：
暂时关闭该选项测试：

{
  "compilerOptions": {
    // ... 其他配置
    "isolatedModules": false
  }
}

若问题解决，再根据项目需求调整其他配置以兼容isolatedModules（比如确保所有文件都是ES模块）。

验证步骤 #

按以下顺序调整配置并重新打包测试：

1. 修改TypeScript的module和moduleResolution为ESNext和Bundler；
2. 给Webpack添加target: 'webextension'；
3. 重新打包并运行Chrome插件，检查错误是否消失；
4. 若仍有问题，再尝试关闭isolatedModules或禁用Tree Shaking。

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