React Native 0.70.6配置react-native-svg-transformer报错求助

问题根源 #

原配置存在两处核心问题：

• 重复使用module.exports，后一个异步导出完全覆盖了前一个配置，丢失了getTransformOptions等关键运行设置
• React Native 0.70+版本的Metro配置逻辑有调整，需要正确合并默认配置与自定义转换器配置，不能直接覆盖默认配置结构

修正后的配置代码 #

/**
Metro configuration for React Native
https://github.com/facebook/react-native
@format
*/
const { getDefaultConfig, mergeConfig } = require('metro-config');

module.exports = async () => {
  const defaultConfig = await getDefaultConfig();
  const { resolver: { sourceExts, assetExts } } = defaultConfig;

  // 合并默认配置与SVG转换器自定义配置
  return mergeConfig(defaultConfig, {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  });
};

关键调整说明 #

• 使用mergeConfig工具合并默认配置与自定义配置，避免丢失Metro原生的默认设置
• 只保留一个module.exports异步导出，完全符合React Native 0.70+的Metro配置规范
• 整合了原有的getTransformOptions运行配置与SVG转换器的babelTransformerPath配置
• 正确修改资源扩展名规则，将svg从静态资源类型转为源码文件类型处理

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