I'm facing an issue where I am unable to import components from a Vue file without having to append the .vue extension.
In my project, which is a Vue project with TypeScript and a class-based setup, I have separated the script and template files (.ts and .vue files).
For example: import DashboardCard from "@/components/dashboard_card/DashboardCard";When I try to import the component without the .vue extension,
[Vue warn]: Failed to mount component: template or render function not defined.This error disappears when I include all components with the .vue extension. While this wouldn't be a problem if it were a new project, I am encountering this issue in an already existing large project. I suspect it has something to do with resolving extensions (in vue.config.js - resolve [.vue]). I'm struggling to understand the differences between vue.config.js and webpack.config.js.
My vue.config.js configuration looks like this:
module.exports = {
transpileDependencies: [
"vuex-module-decorators",
],
chainWebpack: config => {
config.module
.rule('po')
.test(/\.vue$/)
.use('vue')
.loader('vue-loader')
.options({
esModule: false,
})
}
}
My babel.config.js configuration is as follows:
module.exports = {
presets: [
'@vue/app'
]
}
My tsconfig.json configuration appears as below:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictPropertyInitialization": true,
"allowSyntheticDefaultImports": true,
"strictNullChecks": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"mocha",
"node",
"chai"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
],
"files": ["./src/shims-vue.d.ts"]
}
My package.json includes the following dependencies and devDependencies configurations.
{Insert your package.json content here}I would greatly appreciate any guidance on how to solve this particular issue.