React Native v0.74.1导入SVG时模块解析失败求助

以下是针对你遇到的SVG模块解析错误的具体排查和解决步骤：

1. 修正Metro配置的合并逻辑 #

React Native 0.74的Metro默认配置可能存在数组引用问题，修改配置确保assetExts和sourceExts是独立新数组，避免原配置被意外修改：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { createSentryMetroSerializer } = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');

const defaultConfig = getDefaultConfig(__dirname);
// 复制数组避免修改原默认配置
const assetExts = [...defaultConfig.resolver.assetExts].filter(ext => ext !== 'svg');
const sourceExts = [...defaultConfig.resolver.sourceExts, 'svg'];

const config = {
  serializer: {
    customSerializer: createSentryMetroSerializer(),
  },
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts,
    sourceExts,
  },
};

module.exports = mergeConfig(defaultConfig, config);

2. 确保TypeScript声明文件生效 #

• 确认declarations.d.ts放在项目根目录或src目录下
• 修改tsconfig.json，将声明文件纳入编译范围：

{
  "include": [
    "src/**/*",
    "declarations.d.ts"
  ]
}

3. 彻底清理缓存 #

执行以下命令重置Metro和Native端缓存：

npx react-native start --reset-cache
# iOS端额外执行：
cd ios && pod install && cd ..
# Android端额外执行：
cd android && ./gradlew clean && cd ..

4. 验证依赖版本兼容性 #

确保react-native-svg版本与React Native 0.74.1兼容，建议安装最新稳定版：

npm install react-native-svg@latest
# 或使用yarn：
yarn add react-native-svg@latest

5. 排查Sentry序列化器冲突 #

暂时注释掉Sentry的自定义序列化器配置，测试SVG是否能正常解析：

// serializer: {
//   customSerializer: createSentryMetroSerializer(),
// },

若注释后问题解决，可自定义结合两者的序列化逻辑：

const metroSerializer = require('metro/src/serializer');
const sentrySerializer = createSentryMetroSerializer();

const config = {
  serializer: {
    customSerializer: (entry, options) => {
      const serialized = metroSerializer(entry, options);
      return sentrySerializer(serialized, options);
    },
  },
  // ...其他配置项
};

6. 检查SVG文件有效性 #

• 确认SVG文件路径拼写正确，文件名无大小写不一致问题
• 用浏览器打开SVG文件，验证文件本身无语法错误

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