Vue Typescript @Component сгенерировал ошибку компиляции. с vue -классом

Question

Я получаю ошибку Module parse failed: Unexpected character '@' при компиляции моего Vue приложения. Это просто приложение Hello World! , использующее Webpack4, Vue и Typescript. Я использую vue-class-component и vue-property-decorator

Я выполнил почти все настройки, которые смог найти, и до сих пор не могу решить эту проблему. Все компилируется и работает нормально, если я использую classi c Typescript с Vue, а не компоненты класса. Как только я пытаюсь использовать декоратор @Component, я получаю сообщение об ошибке.

package. json:

{
  "name": "vue_tutorial",
  "version": "1.0.0",
  "description": "Vue JS with Typescript tutorial",
  "main": "src/index.js",
  "scripts": {
    "dev": "webpack --config build/webpack.config.dev.js",
    "watch": "webpack --config build/webpack.config.dev.js --watch"
  },
  "devDependencies": {
    "css-loader": "^3.4.2",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.2",
    "vue-class-component": "^7.2.3",
    "vue-loader": "^15.9.0",
    "vue-property-decorator": "^8.4.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "vue": "^2.6.11"
  }
}

webpack.config.dev. js:

'use strict'

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\/.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.vue']
    },
    plugins:  [
        new VueLoaderPlugin()
    ]
}

tsconfig. json:

{
  "compilerOptions": {
  "target": "es5",
  "strict": true,
  "module": "es2015",
  "moduleResolution": "node",
  "experimentalDecorators": true,
  "allowSyntheticDefaultImports": true
  }
}

Чего мне не хватает? Почему декомпилятор @Component не компилируется?

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class App extends Vue {

}
</script>

Git Репо: github.com / devsi / vue -учебник /