如何在React Webpack JS中使用WASM Tiktoken？解决构建报错

1. 规范Tiktoken包的导入方式 #

确保使用官方适配JS/TS的tiktoken包，而非手动导入原始WASM文件：

• 安装依赖：npm install tiktoken
• 正确导入：

  import { encodingForModel } from 'tiktoken';
  

  禁止直接引入WASM模块，官方包已封装好WASM的加载逻辑。

2. 配置Webpack支持WASM #

Webpack 5内置WASM支持，但需显式开启相关实验特性：

• 手动配置Webpack时，修改webpack.config.js：

  module.exports = {
    experiments: {
      asyncWebAssembly: true,
      syncWebAssembly: true
    },
    resolve: {
      extensions: ['.wasm', '.js', '.json']
    }
  };
  

• 若使用Create React App（CRA），需通过react-app-rewired修改隐藏的Webpack配置：
  1. 安装依赖：npm install react-app-rewired customize-cra --save-dev
  2. 创建config-overrides.js：

     const { override, addWebpackExperiment } = require('customize-cra');
     
     module.exports = override(
       addWebpackExperiment({
         asyncWebAssembly: true,
         syncWebAssembly: true
       })
     );
     

  3. 修改package.json的scripts：

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

3. 异步初始化Tiktoken编码器 #

Tiktoken的WASM模块是异步加载的，需避免在模块顶层同步调用初始化逻辑：

import { useEffect, useState } from 'react';
import { encodingForModel } from 'tiktoken';

function TokenCounter() {
  const [encoder, setEncoder] = useState(null);

  useEffect(() => {
    const initEncoder = async () => {
      const enc = await encodingForModel('gpt-3.5-turbo');
      setEncoder(enc);
    };
    initEncoder();
  }, []);

  const countTokens = (text) => {
    if (!encoder) return 0;
    return encoder.encode(text).length;
  };

  return <div>Token count: {countTokens('Hello, Tiktoken!')}</div>;
}

export default TokenCounter;

4. 清理缓存并重新构建 #

• 删除node_modules、package-lock.json（或yarn.lock），重新执行npm install
• 清除Webpack缓存：删除build/dist目录，或执行npx webpack --clean后重新构建

5. 排除插件冲突 #

• 禁止使用file-loader或url-loader处理WASM文件，Webpack 5的内置asset处理逻辑已足够
• 检查Babel插件（如babel-plugin-transform-runtime）是否干扰WASM导入，必要时暂时禁用测试

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