React项目引入hafas-client遇createRequire加载问题求助

问题根源 #

报错是因为hafas-client使用了import.meta.url这个ES模块特性，而默认的react-scripts配置不会对node_modules目录下的包进行Babel转译，导致babel-loader无法解析该语法。

可行解决方法 #

方法1：用react-app-rewired修改转译规则（推荐） #

这个方法不需要eject项目，能安全修改webpack配置：

• 先安装依赖：

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

• 在项目根目录新建config-overrides.js文件，写入：

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

module.exports = override(
  babelInclude([
    path.resolve('src'), // 保持原有src目录的转译
    path.resolve('node_modules/hafas-client'), // 新增对hafas-client的转译
  ])
);

• 修改package.json里的启动脚本：

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

• 重启项目：npm start

方法2：降级hafas-client到兼容版本 #

如果不想修改配置，可以尝试降级hafas-client到不使用import.meta.url的旧版本，比如：

npm install hafas-client@5.0.0

（注：可查看该包的发布历史确认具体兼容版本，上述版本仅作示例）

方法3：eject项目后修改webpack配置（不推荐） #

eject会暴露所有配置文件，但后续无法通过react-scripts更新配置，谨慎操作：

1. 执行npm run eject确认eject
2. 在项目根目录的webpack.config.js中找到babel-loader的规则，将node_modules/hafas-client加入转译白名单，示例：

module: {
  rules: [
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: [
        paths.appSrc,
        path.resolve(__dirname, 'node_modules/hafas-client')
      ],
      loader: require.resolve('babel-loader'),
      // ...其他原有配置
    }
  ]
}

3. 重启项目

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