在外部React项目复用Jitsi的tflite.js报错，需额外配置吗？

一、解决'read'/'define'未定义问题 #

Jitsi的tflite.js是基于AMD/UMD规范构建的，直接在React（默认采用ES模块规范）中引入会导致全局变量缺失。解决步骤：

• 在public/index.html里用script标签提前引入这两个文件，放在React的bundle脚本之前：

  <script src="%PUBLIC_URL%/vendor/tflite/tflite.js"></script>
  <script src="%PUBLIC_URL%/vendor/tflite/tflite-simd.js"></script>
  

• 在React组件中声明全局变量，避免编译报错：

  /* global tflite */
  function YourComponent() {
    // 直接使用window.tflite或tflite对象
    const model = tflite.createModel(...);
    // ...
  }
  

二、修复ESLint规则冲突 #

• 在项目根目录的.eslintrc.js中添加全局变量声明：

  module.exports = {
    globals: {
      tflite: 'readonly'
    },
    // 其他规则...
  };
  

• 如果是局部组件的ESLint报错，可在组件顶部添加注释：

  /* eslint-disable no-undef */
  // 你的组件代码
  /* eslint-enable no-undef */
  

三、解决WebAssembly MIME类型错误 #

WASM文件需要服务器返回正确的application/wasm MIME类型：

• 若使用Create React App，将WASM文件放在public/vendor/tflite目录下，默认配置会自动处理MIME类型；
• 自定义Webpack配置时，添加规则处理WASM：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.wasm$/,
          type: 'asset/resource',
          generator: {
            filename: 'static/media/[name].[hash][ext]'
          }
        }
      ]
    }
  };
  

• 开发服务器（如webpack-dev-server）需支持WASM MIME，新版默认已配置，旧版可在devServer中添加：

  devServer: {
    mimeTypes: {
      'application/wasm': ['wasm']
    }
  }
  

四、额外注意事项 #

• 确保tflite.js、tflite-simd.js和对应的WASM文件路径一致，tflite内部会自动加载同目录下的WASM文件；
• 若使用React Strict Mode，需注意tflite的初始化时机，避免重复创建模型实例；
• 生产环境构建时，不要将这两个文件打包进bundle，保持通过script标签引入，避免模块规范冲突。

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