React项目引入google-translate-api-x报错：无法导入命名导出translate

错误原因 #

报错提示说明库的模块导出方式与你的导入语法不兼容，尽管文档声称支持浏览器环境，但实际打包后的模块可能存在默认导出和命名导出的解析冲突，尤其是在create-react-app默认的webpack配置下。

解决步骤 #

1. 切换为默认导入后解构 #

将原命名导入改为默认导入，再解构所需方法，这是最直接的兼容方案：

import GoogleTranslate from 'google-translate-api-x';
const { translate, Translator, singleTranslate, getBatchInitData, batchTranslate, languages, isSupported, getCode } = GoogleTranslate;

之后你的测试函数dummy可以正常调用，无需修改逻辑。

2. 更新库到最新版本 #

旧版本可能存在浏览器环境下的导出bug，执行命令更新：

# npm
npm update google-translate-api-x

# yarn
yarn upgrade google-translate-api-x

更新后再尝试原导入方式，若问题解决则无需后续操作。

3. 自定义webpack配置处理.mjs模块 #

如果上述方法无效，需修改create-react-app的webpack配置，让其正确解析node_modules中的.mjs模块：

• 安装依赖工具：

npm install react-app-rewired customize-cra --save-dev

• 在项目根目录创建config-overrides.js文件，添加以下配置：

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  addWebpackModuleRule({
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto'
  })
);

• 修改package.json中的scripts命令，替换原react-scripts为react-app-rewired：

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

重启项目后即可生效。

4. 补充浏览器Polyfill（若需兼容旧浏览器） #

该库依赖浏览器的fetch API，若你的项目需要兼容不支持fetch的旧浏览器，需引入polyfill：

npm install whatwg-fetch --save

在src/index.js顶部导入：

import 'whatwg-fetch';

内容的提问来源于stack exchange，提问作者Jan Piątkowski