React Native导入新SVG报错：@svgr/plugin-svgo缺失及UnicodeRange问题

针对你遇到的问题——之前导入SVG正常，新增SVG时出现UnicodeRange节点缺少structure字段的报错，且安装@svgr/plugin-svgo无效的情况，结合你提到的新建项目可解决的线索，问题大概率出在现有项目的依赖版本冲突或缓存紊乱上，以下是具体解决步骤：

• 清理依赖缓存并重装
  先彻底清理npm/yarn缓存，移除旧的依赖文件后重新安装：

  # npm用户
  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  
  # yarn用户
  yarn cache clean
  rm -rf node_modules yarn.lock
  yarn install
  

• 锁定@svgr/plugin-svgo的兼容版本
  直接执行npm install @svgr/plugin-svgo可能安装了与项目中@svgr/core不兼容的新版本，导致报错。先查看当前@svgr/core的版本：

  npm list @svgr/core
  

  安装与@svgr/core同大版本的@svgr/plugin-svgo，比如如果@svgr/core是6.x版本，可执行：

  npm install @svgr/plugin-svgo@6.5.1
  

• 检查并修复metro打包配置
  确保metro.config.js中正确配置了SVG转换规则，避免因配置缺失导致的解析异常：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  const defaultConfig = getDefaultConfig(__dirname);
  const { assetExts, sourceExts } = defaultConfig.resolver;
  
  module.exports = mergeConfig(defaultConfig, {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  });
  

• 重置metro打包缓存
  React Native的metro缓存可能残留旧的解析规则，执行以下命令重置：

  npx react-native start --reset-cache
  

• 极端情况：重新生成依赖锁文件
  如果以上步骤无效，可尝试删除package-lock.json或yarn.lock后重新执行安装，让依赖管理器重新解析所有依赖的版本关系，这也是你之前新建项目能解决问题的核心原因——新建项目会生成全新的锁文件，避免了旧锁文件中的版本冲突。

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