webpack tsx 模块解析失败：意外的令牌答案

【问题标题】：webpack tsx Module parse failed: Unexpected tokenwebpack tsx 模块解析失败：意外的令牌
【发布时间】：2020-11-20 06:24:10
【问题描述】：

我正在尝试用 TypeScript 编写前端 (React) 和后端 (Express)。目前，我在根文件夹中的webpack.config.js 遇到错误，即使我有ts-loader。

这是webpack.config.js

const webpack = require('webpack');
const path = require('path');

const config = {
    cache: true,
    mode: 'development',
    entry: {
        'user': ['./src/client/User/index.tsx', 'webpack-hot-middleware/client']
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/static'
    },
    devServer: {
        contentBase: './dist',
        hot: true
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                include: path.join(__dirname, 'client')
            }
        ]
    },
    node: { fs: 'empty' }
};

module.exports = config;

这是我的tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "jsx": "react",
        "esModuleInterop": true,
        "outDir": "dist",
        "sourceMap": true,
        "baseUrl": "."
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules"]
}

我收到这样的错误：

ERROR in ./src/client/User/index.tsx 10:1
Module parse failed: Unexpected token (10:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| const rootComponent = (
>       <Provider store={store}>
|               <BrowserRouter>
|                       <div id="page-container" className="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed side-trans-enabled">
 @ multi ./src/client/User/index.tsx webpack-hot-middleware/client user[0]

【问题讨论】：

标签： node.js reactjs typescript webpack

【解决方案1】：

感谢 FunkeyFlo 的回答，我自己找到了答案。我必须同时更改：

tsconfig.json: include 还有src/**/*.tsx
webpack.config.js: entry 到 ./dist/src/client/User/index

【讨论】：

【解决方案2】：

将tsconfig 中的include 部分更改为以下内容

{
    ...
    "include": [
        "src/**/*.ts", 
        "src/**/*.tsx"
    ],
    ...
}

【讨论】：

这行不通。它仍然产生相同的错误
非常感谢，它帮助我找出了正确的答案