I have extensively searched for a solution to this issue, but unfortunately, I have not been able to find any results.
When working with a very basic component, I encounter the following error: Cannot find module '#imports' or its corresponding type declarations
import { setPageLayout } from '#imports';
The code functions correctly, but it seems to be related to types and not recognizing the imports with "#" symbol.
I have followed all the configurations outlined in the documentation. Does anyone have any suggestions?
Here is my tsconfig:
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@nuxt/types",
"@nuxt/typescript-build",
"@types/node"
],
"resolveJsonModule": true,
"noImplicitAny": false,
},
"exclude": [
"node_modules"
],
"extends": "./.nuxt/tsconfig.json"
}
nuxt.config file:
import type { NuxtConfig } from '@nuxt/types';
const config: NuxtConfig = {
buildModules: ['@nuxt/typescript-build'],
vue: {
config: {
productionTip: false,
devtools: true
}
}
};
export default config;
vue-shim.d.ts file:
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}