TS2307: Cannot find module '#/components/helper/utils/SimpleUtil.vue' or its corresponding type declarations - vue.js

Question

I work on Nuxt.js (Vue.js) project that uses TypeScript in VSCode. When importing components I'd like to cut off long paths to them. For example:
Instead of:
<script lang="ts">
import SimpleUtil from '../../../components/helper/utils/SimpleUtil.vue'
I'd like to have:
<script lang="ts">
import SimpleUtil from '#/components/helper/utils/SimpleUtil.vue'
Or:
<script lang="ts">
import SimpleUtil from 'components/helper/utils/SimpleUtil.vue'
But, when I use:
<script lang="ts">
import SimpleUtil from '#/components/helper/utils/SimpleUtil.vue'
There's an error:
The tsconfig.json file looks as following:
{
"compilerOptions": {
"target": "ES2018",
"module": "ES6",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": "./src",
"noImplicitAny": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"types": [
"#types/node",
"#nuxt/types"
],
"resolveJsonModule": true
},
"paths": {
"~/*": [
"src/*"
],
"#/*": [
"src/*"
]
},
"include": [
"src/**/*.ts",
"src/**/*.vue"
],
"exclude": [
"src/node_modules",
"./node_modules",
".nuxt",
"dist"
]
}
The nuxt.config.js file looks as following:
export default {
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'Licota',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: ['~/assets/css/main.sass'],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/typescript
'#nuxt/typescript-build',
// https://go.nuxtjs.dev/stylelint
'#nuxtjs/stylelint-module',
],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'bootstrap-vue/nuxt',
],
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
extractCSS: true,
},
srcDir: 'src/',
vue: {
config: {
productionTip: false,
devtools: true
}
}
}
How can I fix this issue?

Answer 1

This is the way that I declare paths in my jsconfig.json and it works for me:
"compilerOptions": {
"paths": {
"~/*": ["./*"],
"#/*": ["./*"],
"~~/*": ["./*"],
"##/*": ["./*"]
}
},
For more information you can check Nuxt TypeScript