TypeScript+React/Express项目webpack解析tsx遇Unexpected token错误

我仔细看了你的配置和报错信息，问题主要出在webpack的loader匹配路径错误和TypeScript配置未包含TSX文件这两个地方，导致ts-loader没有正确处理你的TSX组件文件，才会出现"Unexpected token"的解析错误。

问题1：Webpack的include路径不匹配 #

你的入口文件是./src/client/User/index.tsx，但webpack配置里的include写的是path.join(__dirname, 'client')——这指向的是项目根目录下的client文件夹，而你的代码实际在src/client目录下。ts-loader根本没匹配到你的TSX文件，自然无法解析JSX语法。

修改webpack.config.js里的loader规则：

module: {
  rules: [
    {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      // 修正路径为src/client
      include: path.join(__dirname, 'src/client')
    }
  ]
},

问题2：TSConfig未包含TSX文件 #

你的tsconfig.json里include只指定了src/**/*.ts，但TSX文件（.tsx后缀）没有被TypeScript编译器纳入处理范围，这也会导致Webpack无法正确解析JSX。

修改tsconfig.json的include字段：

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

额外检查：确保依赖已安装 #

最后确认你已经安装了必要的依赖包：

npm install --save-dev ts-loader typescript
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

做完这些修改后，重新运行Webpack应该就能正常解析TSX文件了。

内容的提问来源于stack exchange，提问作者necroface