In my current Vue project, I am utilizing VueJs 3 with TypeScript and plan to package the application as a Desktop app using Electron.
When running vite, everything functions correctly. However, when I run npm run ts to convert TypeScript files to JavaScript, I encounter the following error:
src/main.ts:2:17 - error TS2307: Cannot find module './App.vue' or its corresponding type declarations.
2 import App from './App.vue'
~~~~~~~~~~~
... (remaining errors omitted for brevity)
Found 10 errors in 2 files.
Errors Files
1 src/main.ts:2
9 src/router/routes.ts:1
The issue arises due to the use of aliases in my configuration. Identifying the root cause has proven challenging as the compiler also encounters issues with the './App.vue' import in main.ts. What could be causing this configuration error?
Source code
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue()
],
resolve: {
alias: {
'@': resolve(__dirname, './src'),
'@components': resolve(__dirname, './src/components'),
'@stores': resolve(__dirname, './src/data/stores'),
'@pages': resolve(__dirname, './src/pages'),
'@scripts': resolve(__dirname, './src/scripts'),
'@models': resolve(__dirname, './src/data/models'),
'@enums': resolve(__dirname, './src/data/enums'),
}
},
build: {
outDir: 'build/vite',
emptyOutDir: true
},
base: './'
})
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
... (remaining json content omitted for brevity)
"include": ["src/*"],
"references": [{
"path": "./tsconfig.node.json"
}]
}
package.json
{
"name": "mealpro",
"displayName": "Mealpro",
... (remaining json content omitted for brevity)
"devDependencies": {
"@electron-forge/cli": "^7.4.0",
... (remaining dependencies omitted for brevity)
}
}