CODEWITHSUNDEEP
reactjstypescriptsvgwebpackwebpack-file-loader
hideto
hideto

Reputation: 205

typescript cannot find module when import svg file

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

Upvotes: 16

Views: 45403

Answers (4)

J. Meier
J. Meier

Reputation: 501

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.

Upvotes: 12

hetelek
hetelek

Reputation: 3886

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;
}
  1. Add custom.d.ts in tsconfig.json's include
"include": [
  ...,
  "custom.d.ts"
]
  1. Usage:
import { ReactComponent as MyIcon } from '../icon.svg'

...

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

Upvotes: 18

Killian Huyghe
Killian Huyghe

Reputation: 1624

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

Upvotes: 20

Vladimir Vs
Vladimir Vs

Reputation: 1492

I'd be better included like this:

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

Upvotes: 3

Related Questions