React Native配置react-native-svg-transformer后仍无法导入SVG

问题概述 #

已按react-native-svg-transformer官方步骤完成安装配置，但导入SVG文件时仍提示无法解析模块，怀疑路径是否影响解析。

错误信息 #

Error: Unable to resolve module ./svg/ABC.svg from /src/asset/images/index.ts: 

None of these files exist:
  * src/asset/images/svg/angle.svg(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.svg|.native.svg|.svg)
  * src/asset/images/svg/angle.svg/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.svg|.native.svg|.svg)

相关配置与代码 #

metro.config.js #

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

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };
  config.resolver = {
    ...resolver,
    assetExts: ["db", "mp3", "ttf", "obj", "png", "jpg", "glb", "gltf", "fbx"].filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  };

  return config;
})();

declarations.d.ts #

declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';

declare module "*.svg" {
  import React from 'react';
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

images/index.ts #

import ABC from "./svg/ABC.svg";
import SunAVG from "./svg/SunAVG.svg";

export {ABC, SunAVG};

文件路径结构 #

metro.config.js
package.json
└── src
    ├── Types
    │   └── declaration.d.ts
    └── asset
        └── images
            ├── avg
            │   └── ABC.svg
            └── index.ts

问题分析与解决步骤 #

1. 核心路径错误
   从路径结构可见，SVG文件实际存放在src/asset/images/avg/目录下，但index.ts中导入路径写的是./svg/ABC.svg，路径中的文件夹名称错误（应为avg而非svg），这是导致模块无法解析的直接原因。修正导入路径：

   import ABC from "./avg/ABC.svg";
   // 若SunAVG.svg也在avg目录下，同理修正
   import SunAVG from "./avg/SunAVG.svg";
   
   export {ABC, SunAVG};
   

2. 文件名拼写检查
   错误信息中提到angle.svg，但代码中导入的是ABC.svg，需确认是否存在文件名拼写错误，或导入语句中写错了文件名。

3. 确保TypeScript识别声明文件
   检查项目tsconfig.json的include数组，确保包含src/Types目录，例如：

   "include": [
     "src/**/*",
     "src/Types/**/*"
   ]
   

4. 重启Metro并清除缓存
   配置修改后需重启Metro服务，同时清除缓存以确保配置生效：

   expo start -c
   # 或使用react-native命令
   npx react-native start --reset-cache
   

5. 验证依赖完整性
   确认react-native-svg和react-native-svg-transformer已正确安装，且版本与项目React Native/Expo版本兼容。

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