how to make tsx work in vue-cli3 without babel

I’m setting up a new project which created by vue-cli 3.8.0

And I choosed typescript only (without babel compiler)

Now, when I wrote a foo.tsx File like follow:

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

But I had got an error:

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>);
|     },
| };

Firstly, I thought there must be something wrong with my webpack config.

So I press vue inspect > out.js to terminal for getting final config.

I will show you the relational part:

{
    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,
        }),
    ],
}

After I read it, I was puzzled what happened because I think it's correctly.

So, I need your helpness.

PS

vue: 2.6.10

@vue/cli-plugin-typescript: 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"
  ]
}