Cannot find module or its corresponding type declarations

[kierancrown]

I seem to be getting some Typescript errors when importing a SVG. I have setup my metro.config.js and created a declarations.d.ts file as per the installation instructions.

I still seem to be getting the following error however:

Cannot find module '../assets/icons/CheckmarkIcon.svg' or its corresponding type declarations.ts(2307)

I'm importing the svgs like this:

import CheckmarkIcon from '../assets/icons/CheckmarkIcon.svg';
import StarIcon from '../assets/icons/star.svg';

Here is my metro.config.js:

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

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

Here is my declarations.d.ts:

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

I'm using RN 0.68.1 I'm using react-native-svg 12.3.0 I'm using react-native-svg-transformer 1.0.0

[MuhammadRafeh]

Yes, Same problem here

[mzohrab]

You should include your declarations.d.ts in your tsconfig.json file. Like: "include": [..., "declarations.d.ts"]

[lcundiff]

I included it in my tsconfig file and still same error

[kristerkari]

It looks like your Typescript setup is not able to find the file. I don't know why, so I can not really help.

[algarcia-vector]

I had the same problem, I fix it by checking the file name capital letters, there was a miss match on my import. I had imported it without capital letter, as the file name started with capital letter for example:

Icon.svg

import Icon from '../images/icon.svg'

so it was giving me the same error as you... the correct way is like this:

import Icon from '../images/Icon.svg'

[CristianFigueredo]

Hello, got the same error today

to fix it an option can be this file:

// assets/icons/custom.d.ts
declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

OBS:

• the file name need to be "custom.d.ts"
• this file is needed in the folders where you have svg files

[quannq-vvt]

Hello, got the same error today

to fix it an option can be this file:

// assets/icons/custom.d.ts
declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

OBS:

• the file name need to be "custom.d.ts"
• this file is needed in the folders where you have svg files

It's work, but the file name do not to be custom.d.ts, just contain d.ts and what ever front of this

[Chaknith]

Somehow removing the declarations import in tsconfig.json file works for me. Below are the libraries versions: "react-native-svg": "^14.1.0", "react-native-svg-transformer": "^1.3.0",

Let me be a little bit clear. I did:

• the metro.config.js section "For React Native v0.72.1 or newer."
• create declarations.d.ts with content below:

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

My project is being generated following React Native guide. I could see that it is using Babel and Metro.