Expo web构建失败：victory-native的.js文件含JSX缺少对应loader如何解决

错误原因 #

该报错是由于victory-native包内的源码包含未转译的类静态属性语法和JSX语法，Expo默认的构建配置不会处理node_modules下的第三方包源码，因此需要调整配置将victory-native纳入转译范围，可按你的Expo版本选择对应方案：

方案1：适用于Expo SDK 48及更早版本（Web端默认使用Webpack构建） #

1. 安装依赖Babel插件 #

npm install @babel/plugin-proposal-class-properties @babel/plugin-transform-react-jsx --save-dev

2. 修改根目录babel.config.js #

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    overrides: [
      {
        test: /node_modules\/victory-native\//,
        plugins: [
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-transform-react-jsx'
        ]
      }
    ]
  };
};

3. 新增根目录webpack.config.js覆盖默认配置 #

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // 找到处理JS/JSX的Babel loader规则
  const babelRule = config.module.rules.find(rule => rule.test.toString() === /\.(js|mjs|jsx|ts|tsx)$/.toString());
  // 将victory-native从排除项中移除
  babelRule.exclude = /node_modules(?!\/victory-native)/;
  return config;
};

方案2：适用于Expo SDK 49及更高版本（Web端默认使用Metro构建） #

直接修改根目录metro.config.js，将victory-native加入转译列表即可：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);
config.transformer.transpileModules = ['victory-native'];

module.exports = config;

方案3：Web端别名替换（跨端适配更稳定） #

如果不需要在Web端使用原生适配逻辑，可直接在Web构建时将victory-native替换为纯Web适配的victory库，无需处理转译问题：

1. 安装victory依赖

npm install victory --save

2. 按构建工具修改别名配置：

• 若使用Webpack，在上述webpack.config.js中新增别名：

config.resolve.alias['victory-native'] = 'victory';

• 若使用Metro，在上述metro.config.js中新增别名：

config.resolver.alias = {
  'victory-native': 'victory'
};

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