I have been using Laravel Mix to compile my Vue components, incorporating TypeScript and class-based components. Each class is exported from the component, and every component is required by the context in the main application script. However, during rendering, Vue is throwing an error:
Uncaught TypeError: Cannot set property 'render' of undefined
at normalizeComponent (componentNormalizer.js:24)
I've scoured the internet for solutions, but all I find are discussions about invalid export classes. I am confident that my classes are being exported correctly within the components. I'm not sure where I'm going wrong.
When I revert back to object-based components in plain JavaScript, everything works perfectly. This leads me to believe that there may be an issue with my TypeScript configuration. I feel completely defeated :(
app.ts
import Vue from 'vue';
import _ from "lodash"
export default class App {
protected registerComponents(): void {
const components = require.context('./', true, /\.vue$/i);
components.keys().forEach((componentPath) => {
// @ts-ignore
const componentName = componentPath
.split('/').pop() // full component name
.split('.').slice(0, 1).shift(); // component name without extension
Vue.component(
_.kebabCase(componentName),
components(componentPath)
);
})
}
protected boot(): void {
this.registerComponents();
}
public init(): Vue {
this.boot();
return new Vue({
el: '#main',
});
}
}
EventSignUpForm.vue
<template>
<div>
<p>Long-form v-model example</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import {Component} from 'vue-property-decorator';
@Component({
name: 'EventSignUpForm',
})
export class EventSignUpForm extends Vue {
protected count = 0
public increment() {
this.count++
}
public decrement() {
this.count--
}
}
export default EventSignUpForm;
</script>
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"node",
"webpack-env"
],
"paths": {
"@/*": ["./resources/js/*"]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"resources/js/**/*.ts",
"resources/js/**/*.tsx",
"resources/js/**/*.vue"
],
"exclude": [
"node_modules"
]
}
webpack.mix.js
class WebpackMix {
constructor() {
this.mix = require('laravel-mix');
}
configureWebpack(){
this.mix.webpackConfig({
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"],
alias: {
'@': path.resolve(__dirname, 'resources', 'js'),
},
}
});
}
// others things
}