Importing SVG through a typescript path alias (module not found)

I have a create-react-app (CRA) so I don't have access to the webpack.config, I'm using typescript to create path aliases to common core imports for the application. This is all working I can import everything through the path aliases but .svg files.

Question: How can I import .SVG files through my @assets/images/some.svg path alias?

.tsconfig

{    "compilerOptions": {      "target": "es5",      "lib": [        "dom",        "dom.iterable",        "esnext"      ],      "allowJs": true,      "skipLibCheck": true,      "esModuleInterop": true,      "allowSyntheticDefaultImports": true,      "strict": true,      "forceConsistentCasingInFileNames": true,      "noFallthroughCasesInSwitch": true,      "module": "esnext",      "moduleResolution": "node",      "resolveJsonModule": true,      "isolatedModules": true,      "noEmit": true,      "jsx": "react",      "baseUrl": "./"    },    "extends": "./paths.json",    "include": [      "src",      "./custom.d.ts"    ]  }      

path.json

  {    "compilerOptions": {      "paths": {        "@pages": ["src/pages"],        "@pages/*": ["src/pages/*"],        "@hooks": ["src/core/hooks"],        "@hooks/*": ["src/core/hooks/*"],        "@components": ["src/core/components"],        "@components/*": ["src/core/components/*"],        "@containers": ["src/containers"],        "@containers/*": ["src/containers/*"],        "@services": ["src/core/services"],        "@services/*": ["src/core/services/*"],        "@configs": ["src/core/configs"],        "@configs/*": ["src/core/configs/*"],        "@assets": ["src/core/assets"],        "@assets/*": ["src/core/assets/*"],        "@models": ["src/core/models"],        "@models/*": ["src/core/models/*"],        "@store": ["src/core/store"],        "@store/*": ["src/core/store/*"],        "@utils": ["src/core/utils"],        "@utils/*": ["src/core/utils/*"],        "@styles": ["src/core/styles"],        "@styles/*": ["src/core/styles/*"]      }    }  }  

custom.d.ts

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

In the file I'm importing the SVG's as follows:

import uploadStep1Logo from '@assets/images/UploadConfirmationDialog_Step1.svg';  import uploadStep2Logo from '@assets/images/UploadConfirmationDialog_Step2.svg';  import uploadStep3Logo from '@assets/images/UploadConfirmationDialog_Step3.svg';  

For some reason, if I use the absolute path it works, however, if I use the @assets/... it cannot resolve and errors as below.

Module not found: Can't resolve '@assets/images/UploadConfirmationDialog_Step1.svg'  

https://stackoverflow.com/questions/67410404/importing-svg-through-a-typescript-path-alias-module-not-found May 06, 2021 at 08:32AM