title: Importing a *.svg module raises Typescript error : "Cannot find module ..."
body: <p>It's a web application made with <code>@vue/cli</code>.
  I want to use <code>vue-svg-loader</code> to load inline Svg as vue components.</p>
  
  <p>As <a href="https://github.com/visualfanatic/vue-svg-loader#readme" rel="nofollow noreferrer">vue-svg-loader installation guide</a> says, I put this code in <code>vue.config.js</code> :</p>
  
  <pre><code>module.exports = {
    chainWebpack: (config) =&gt; {
      const svgRule = config.module.rule('svg');
      svgRule.uses.clear();
      svgRule
        .use('vue-svg-loader')
        .loader('vue-svg-loader');
    },
  };
  </code></pre>
  
  <p>and import my Svg file with <code>import ViwanMap from '@/assets/ViwanMap.svg';</code>.</p>
  
  <p>Also, I created a <code>shims-svg.d.ts</code> in my <code>src/</code> folder containing :</p>
  
  <pre><code>import { VNode } from 'vue';
  declare global {
    type Svg = VNode; // With vue-svg-loader, imported svg is a Vue component.
  }
  
  declare module '*.svg' {
    const content: Svg;
    export default content;
  }
  </code></pre>
  
  <p>Also, there is my <code>tsconfig.js</code> :</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "jsx": "preserve",
      "importHelpers": true,
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "sourceMap": true,
      "baseUrl": ".",
      "types": [
        "webpack-env"
      ],
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
  }
  </code></pre>
  
  <p>The compilation process raises this error :</p>
  
  <pre><code>ERROR in &lt;MY_PROJECT_ROOT&gt;/src/views/Home.vue
  12:22 Cannot find module '@/assets/ViwanMap.svg'.
  </code></pre>
  
  <p>However, the webpack process seems to work, as the svg shows up in my app. It seems to be only a typescript issue. Do you know what is the problem ?
  Thank you :)</p>