Currently, I am in the process of transitioning my .vue components from using JavaScript to TypeScript. As a result, my single file components are structured as follows:
<template>
...something...
</template>
<script lang="ts">
import { } from "./main.ts";
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Despite successfully building with webpack, my editor indicates that importing files with extensions is incorrect when referencing "./main.ts".
If I remove the .ts extension, my editor functions properly (detecting module exports), but webpack fails to build the dist file, displaying the error:
Module not found: Error: Can't resolve './main' in ...Reviewing my webpack configuration below:
const path = require('path');
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
plugins: [ new VueLoaderPlugin() ],
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
extensions: ['.ts', '.js', '.vue']
}
}
I am unsure if the issue lies within my editor or webpack configuration. How can I rectify this to ensure proper functionality? Thanks
Edit:
In response to Jeff's insights, I adjusted the extensions and alias properties in my webpack setup:
extensions: [ ".ts", ".js", ".vue" ],
alias: {
"vue$": "vue/dist/vue.esm.js"
}
Unfortunately, this adjustment did not yield the desired outcome.