Cannot find module ‘X’ or its corresponding type declarations

I have a React Native project, and I'm trying to display local .svg files I have. I installed react-native-svg and react-native-svg-transformer and followed the docs, but I get an error on the import saying Cannot find module '../../assets/call.svg' or its corresponding type declarations. I tried few solutions I found but nothing works.

This is metro.config.js:

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

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

    return {
        transformer: {      
            babelTransformerPath: require.resolve("react-native-svg-transformer")    
        resolver: {
            assetExts: assetExts.filter(ext => ext !== "svg"),
            sourceExts: [...sourceExts, "svg"]    


declare module '*.svg' {
    const content: string
    export default content

and I also added this to tsconfig.json (tried both lines, not together):

"include": ["./src/assets", "./custom.d.ts"],
"include": ["custom.d.ts"]

This is how I'm trying to use it:

import CallIcon from '../../assets/call.svg';    
const Login = () => {    
    return (
        <SafeAreaView style={styles.pageContainer}>
            <View style={styles.greetingContainer}>                
                <View style={styles.inputContainer}>
                    <CallIcon width={36} height={36} />                    
                    <TextInput style={styles.input} placeholder="Phone number" keyboardType="number-pad"></TextInput>

Read more here:

Content Attribution

This content was originally published by John Doah at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: