title: Cannot find module '@/assets/<file-name-here>.svg'. @vue/cli Version: 4.2.3 and 4.3.1
body: <h2>General jist:</h2>
  
  <pre class="lang-js prettyprint-override"><code>import Image from '@/assets/default-profile-picture.svg'
  //ERROR: Cannot find module '@/assets/default-profile-picture.svg'.Vetur(2307)
  </code></pre>
  
  <p>I have spent the better part of today trying to find a solution to this. I know there are a lot of other posts like this one, but they are all outdated (all over a year old).</p>
  
  <p>I've just generated a clean Vue CLI app, and still have the same issue.</p>
  
  <p>I'm using Vue CLI Version 4.2.3, and just attempted using Vue CLI Version 4.3.1, but ran into the same issue.</p>
  
  <p>I have checked that the file is in assets. 
  I have checked that the filename is spelled correctly.
  I have a feeling this is a webpack issue, as require() would not work when called using typescript.
  I have tried creating <code>vue.config.js</code> and manually setting the path for assets.</p>
  
  <h2>Project setup configuration:</h2>
  
  <ol>
  <li>Features: Babel, TS, Router, ESLint</li>
  <li>not class-style syntax</li>
  <li>Babel used alongside Typescript</li>
  <li>No history mode for router</li>
  <li>eslint with error prevention only</li>
  <li>Lint on save</li>
  <li>Configs placed in package.json.</li>
  </ol>
  
  <h1>Error in Component.vue</h1>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script lang="ts"&gt;
  import Vue from 'vue'
  
  /* Cannot find module '@/assets/default-profile-picture.svg'.Vetur(2307) */
  import Image from '@/assets/default-profile-picture.svg'
  
  export default Vue.extend({
    components: {
    },
    props: [
      'employeeImage',
      'employeeName',
      'employeeAge',
      'employeeSalary'
    ],
    data () {
      return {
        marked: false,
        result: [],
        name: this.employeeName,
        age: this.employeeAge,
        salary: this.employeeSalary
      }
    },
    computed: {
      compClasses: function () {
        return {
          marked: this.marked
        }
      },
      imageDefault: function () {
        if (this.employeeImage === '') {
          console.log('employee image empty: ' + this.employeeImage)
          return '@/assets/default-profile-picture.svg'
        } else {
          console.log('employee image set: ' + this.employeeImage)
          return this.employeeImage
        }
      }
    }
  })
  &lt;/script&gt;
  </code></pre>
  
  <h1>Typescript Config</h1>
  
  <pre class="lang-js prettyprint-override"><code>{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "jsx": "preserve",
      "importHelpers": true,
      "moduleResolution": "node",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "sourceMap": true,
      "baseUrl": ".",
      "types": [
        "webpack-env"
      ],
          "paths": {
        "@/*": [
          "src/*"
        ]
          },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "include": [
      "/src/**/*.*",
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
  }
  
  
  </code></pre>
  
  <p>What am I doing wrong?
  Thanks in advance!</p>