typescript cannot find module when import svg file

Question

It's web application created with Typescript, React and webpack. I want to use svg file through webpack. However, I got

    TS2307: Cannot find module '~/images/slide.svg'. 

Typescript files are put on /frontend/src/, and typescript files are build successfully.

Then, I tried some solutions on website. But I could not solve this problem. What I tried is described briefly as follows.

I added a file where defined types in 'typeRoots'. tsconfig.json

{
  "compilerOptions": {
    "outDir": "./app/assets/javascripts/bundles",
    "sourceMap": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "moduleResolution": "node",
    "module": "es2015",
    "target": "es6",
    "jsx": "react",
    "removeComments": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./frontend/src/*"]
    },
    "typeRoots": ["types", "node_modules/@types"]
  },
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "cacheDirectory": "tmp/build_caches/awesome-typescript-loader"
  },
  "include": [
    "./frontend/src/*"
  ],
  "exclude": [
    "node_modules",
    "bundles",
    "**/*.js"
  ]
}

types/images.d.ts

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

I use 'file-loader' on webpack to build svg fild.

Please help me!!

Answer 1

I think it is because of your include section in the Typescript config. Try this:

"include": [
  "./frontend/src/*/**"
],

Otherwise you are only including typing files which are in src folder top level. And your svg typing file is in a sublevel so Typescript will not include it.

Answer 2

I'd be better included like this:

  "include": ["**/*.ts", "**/*.tsx", "images.d.ts"],

Answer 3

If you are using Nextjs, you can create a new file additional.d.ts (same level as next-env.d.ts) and declare modules for image files. You should then include this file in your tsconfig.json.

additional.d.ts:

declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.svg";
declare module "*.gif";

tsconfig.json:

{
  ...
  "include": ["next-env.d.ts", "additional.d.ts", "**/*.ts", "**/*.tsx"],
}