React开发Chrome扩展：混用import与require引入翻译包遇问题求助

问题分析 #

你在Chrome扩展开发中混用Node.js的createRequire API导致报错，核心原因是Chrome扩展运行在浏览器环境，而非Node.js环境，浏览器不支持module模块及createRequire这类Node专属API。同时你的项目已配置为ESM模块（package.json中type: module），应直接使用ESM语法而非混用require。

解决方案 #

1. 替换require为ESM import

修改background.ts，删除Node.js专属代码，直接使用标准ESM导入：

import translate from 'free-translate';

(async () => {
    try {
        const translatedText = await translate('This is cool!', { to: 'ja' });
        console.log(translatedText); // これはカッコいい！
    } catch (error) {
        console.error('翻译请求失败:', error);
    }
})();

2. 安装类型定义（可选但推荐）

如果TypeScript提示模块类型缺失，安装对应类型包：

npm install @types/free-translate --save-dev

3. 调整Webpack配置适配浏览器环境

在webpack/webpack.config.js中明确目标环境为浏览器，并完善Babel预设支持React和TypeScript：

module.exports = {
    target: 'web', // 明确打包为浏览器兼容代码
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react',
                            '@babel/preset-typescript'
                        ]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    }
    // 保留你原有的其他配置（如copy-webpack-plugin、html-webpack-plugin等）
};

4. 优化TypeScript配置

修改tsconfig.json，确保模块解析适配ESM：

{
    "compilerOptions": {
        "module": "ESNext",
        "moduleResolution": "NodeNext",
        "target": "ES6",
        "jsx": "react-jsx",
        "strict": true,
        "esModuleInterop": true
    }
}

5. 验证Manifest配置

确保Chrome扩展的manifest.json中背景脚本指向Webpack打包后的文件：

{
    "manifest_version": 3,
    "background": {
        "service_worker": "background.bundle.js" // 对应你的Webpack输出文件名
    }
    // 其他扩展配置...
}

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