как заставить tsx работать в vue-cli3 без babel

Question

Я настраиваю новый проект, созданный vue-cli 3.8.0

И я выбрал только машинопись (без компилятора babel)

Теперь, когда я написал foo.tsx файл, как следует:

export default {
    render() {
        return (<div>777</div>);
    },
};

Но я получил ошибку:

error in ./src/scripts/foo.tsx

Module parse failed: Unexpected token (3:16)
You may need an appropriate loader to handle this file type.
| export default {
|     render: function () {
>         return (<div>777</div>);
|     },
| };

Во-первых, я подумал, что что-то не так с моим конфигом веб-пакета.

Так что я нажимаю vue inspect > out.js в терминале для получения окончательной конфигурации.

Я покажу вам реляционную часть:

{
    resolve: {
        // ...
        extensions: [
            ".mjs",
            ".js",
            ".jsx",
            ".vue",
            ".json",
            ".wasm",
            ".ts",
            ".tsx",
        ],
    },
    module: {
        noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: "cache-loader",
                        options: {
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\vue-loader",
                            cacheIdentifier: "abfeee2e",
                        },
                    },
                    {
                        loader: "vue-loader",
                        options: {
                            compilerOptions: {
                                preserveWhitespace: false,
                            },
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\vue-loader",
                            cacheIdentifier: "abfeee2e",
                        },
                    },
                ],
            },
            // ...
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: "cache-loader",
                        options: {
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\ts-loader",
                            cacheIdentifier: "f2bb628a",
                        },
                    },
                    {
                        loader: "ts-loader",
                        options: {
                            transpileOnly: true,
                            appendTsSuffixTo: ["\\.vue$"],
                            happyPackMode: false,
                        },
                    },
                ],
            },
            {
                test: /\.tsx$/,
                use: [
                    {
                        loader: "cache-loader",
                        options: {
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\ts-loader",
                            cacheIdentifier: "f2bb628a",
                        },
                    },
                    {
                        loader: "ts-loader",
                        options: {
                            transpileOnly: true,
                            happyPackMode: false,
                            appendTsxSuffixTo: ["\\.vue$"],
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        // ...
        /* config.plugin('fork-ts-checker') */
        new ForkTsCheckerWebpackPlugin({
            vue: true,
            tslint: true,
            formatter: "codeframe",
            checkSyntacticErrors: false,
        }),
    ],
}

После того как я прочитал это, я был озадачен тем, что случилось, потому что я думаю, что это правильно.

Итак, мне нужна ваша помощь.

PS

vue: 2.6.10

@ vue / cli-plugin-typcript: 3.8.1

@ vue / cli-service: 3.8.0

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}