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

Question

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'

benada002 · Answer 1 · 2021-05-06T14:01:14.313

0

Check out this so answer: https://stackoverflow.com/a/60598134/11047070.

But in order for it to work your react-scripts version has to be below 4.0 at moment.

edited May 06 '21 at 14:01

answered May 06 '21 at 01:31

benada002

251
1
2
6

Yeah I've tried that and again relative paths do work fine, but when trying to use an `@alias` it fails. I'm trying to move away from doing `../../../` syntax everywhere. – Jordan Davis May 06 '21 at 01:43
I got it working with this so answer [https://stackoverflow.com/a/60598134/11047070](https://stackoverflow.com/a/60598134/11047070). But your react-script version has to be below 4.0. – benada002 May 06 '21 at 02:47

score 0 · Accepted Answer · answered May 19 '21 at 19:30

0

You must use craco and craco-alias packages with tsconfig

https://www.npmjs.com/package/@craco/craco

answered May 19 '21 at 19:30

Jordan Davis

378
1
4
14

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

2 Answers2