Cannot find module '@/assets/<file-name-here>.svg'. @vue/cli Version: 4.2.3 and 4.3.1

Question

General jist:

import Image from '@/assets/default-profile-picture.svg'
//ERROR: Cannot find module '@/assets/default-profile-picture.svg'.Vetur(2307)

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).

I've just generated a clean Vue CLI app, and still have the same issue.

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.

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 vue.config.js and manually setting the path for assets.

Project setup configuration:

1. Features: Babel, TS, Router, ESLint
2. not class-style syntax
3. Babel used alongside Typescript
4. No history mode for router
5. eslint with error prevention only
6. Lint on save
7. Configs placed in package.json.

Error in Component.vue

<script lang="ts">
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
      }
    }
  }
})
</script>

Typescript Config

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

What am I doing wrong? Thanks in advance!

Answer 1

To whom it may concern, please use absolute path instead of using @ to reference the file when you want to import .vue components. Here is an example:

Instead of this: