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!!

Luther

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.

Cule

File specification cannot end in a recursive directory wildcard (''): './src/*/'. – Intercalation

Answer 2

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"],
}

Portauprince

this worked for me. including "*/.ts", "*/.tsx" after my "src/custom.d.ts" – Derouen

Answer 3

The accepted answer caused odd behavior for me. For example, my build was not failing if I referenced an undefined variable.

What worked for me:

1. Create custom.d.ts in project root:

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

2. Add custom.d.ts in tsconfig.json's include

"include": [
  ...,
  "custom.d.ts"
]

3. Usage:

import { ReactComponent as MyIcon } from '../icon.svg'

...

function MyComponent() {
  return <MyIcon></MyIcon>
}

Fontenot

This should be the accepted answer as the current one didn't worked for me. – Disciple

@VaibhavGoyal I couldn't agree more! – Configuration

Better to put in /{project_root}/types/svg.module.d.ts – Quass

duncanleung.com/typescript-module-declearation-svg-img-assets This seems to have some good info too – Quass

Answer 4

I'd be better included like this:

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

Eckhart

Why it would be better? – Catie