Having trouble mounting component due to template or render function not defined.
Hello everyone, I'm currently attempting to incorporate Typescript into my Laravel / Vue project. However, I've been encountering issues such as the following error message: (Failed to mount component: template or render function not defined.)
I would greatly appreciate any assistance. Thank you!
app.js
require('./bootstrap');
window.Vue = require('vue');
import Example from './components/Example.vue';
const app = new Vue({
el: '#app',
components: {
Example
}
});
tsconfig.json
{
"compilerOptions": {
"lib": ["dom", "es5", "es2015", "es2017"],
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"strict": true,
"noImplicitAny": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"sourceMap": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true
},
"paths": {
"@/*": [
"resources/js/*"
]
},
"include": [
"resources/js/**/*.ts",
"resources/js/**/*.vue"
],
"files": [
"resources/js/references.d.ts"
],
"exclude": [
"node_modules"
]
}
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
module: {
rules: [
{
test: /\.tsx?$/,
use: [{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [ /\.vue$/ ]
}
}],
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true
}
}
],
},
resolve: {
extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
},
});
Example.vue
<template>
<div></div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'Example' as string,
data() {
return {}
},
mounted(): void {
console.log('Component mounted.')
}
})
</script>