事象

WebpackでTypeScript + Vue.jsの環境構築時にlang=tsを指定したComponentを.tsファイルでimportしたときに下記のエラーが発生し、コンポーネントを読み込むことが出来なかった😢

componentNormalizer.js:26 Uncaught TypeError: Cannot set property 'render' of undefined

そのときのエントリーファイル

import Vue from "vue"
import TsCounter from "../components/tsCounter.vue"

new Vue({
  el: "#vue-root",
  components: { TsCounter },
})

Vueコンポーネント

<template>
  <div>
    <button v-on:click="decrement">-</button>
    {{ count }}
    <button v-on:click="increment">+</button>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

// Define the component in class-style
@Component
export default class TsCounter extends Vue {
  // Class properties will be component data
  count:number = 0

  // Methods will be component methods
  increment() {
    this.count++
  }

  decrement() {
    this.count--
  }
}
</script>

解決方法

原因としてはts-loaderでtest: /\.ts/,を指定しているので.tsファイルしかtypescriptとして扱われない。そのため.vueのscpript内のコードがtypescriptとして認識されず、必要なpropatyが定義されなかったという感じのようです😓

そのためts-loaderのoptionsにappendTsSuffixTo: [/\.vue/]を追加して、.vueファイルもts-loaderの対象にしたところエラーが解消しました🥳

module.exports = {
  // 省略
  module: {
    rules: [
      {
        test: /\.ts/,
        exclude: /(node_modules|bower_components)/,
        loader: "ts-loader",
        options: {
          // /vueをtypescriptとして扱う
          appendTsSuffixTo: [/\.vue/]  // NOTE: この設定を追加
        }
      },
     // 省略