打包TSX组件npm包时Webpack解析失败，疑CSS加载问题

错误原因分析 #

你遇到的Module parse failed: Unexpected token错误，核心原因是TypeScript没有正确编译TSX中的JSX语法。ts-loader依赖tsconfig.json的配置来处理TSX文件，如果缺少JSX编译选项，TS会保留JSX语法不转译，Webpack自然无法识别这种非标准JavaScript语法。

另外你的Webpack配置里还有一个小错误：CSS loader的正则表达式写成了/\\.css$/，多了一个多余的转义符，会导致无法匹配.css文件，这也会影响CSS模块的加载。

解决方案 #

1. 修正tsconfig.json的JSX编译配置 #

确保你的tsconfig.json中compilerOptions包含正确的jsx设置，根据React版本选择合适的值：

{
  "compilerOptions": {
    "jsx": "react-jsx", // React 17+推荐使用该值，React 16及以下用"react"
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

jsx选项是关键，它告诉TypeScript如何转换JSX语法，没有这个配置，ts-loader只会编译TypeScript类型，不会处理JSX。

2. 修复Webpack中CSS loader的正则错误 #

把CSS规则里的test: /\\.css$/改成test: /\.css$/，正确匹配.css文件：

{
  test: /\.css$/,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        importLoaders: 1,
        modules: true,
      },
    },
  ],
}

3. 可选：统一用Babel处理所有JS/TS文件（优化配置） #

如果你想简化配置，可以用babel-loader同时处理JS、JSX、TS、TSX文件，无需单独配置ts-loader。需要先安装@babel/preset-typescript依赖，然后修改Webpack的module规则：

{
  test: /\.(js|jsx|ts|tsx)$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: [
        "@babel/preset-react",
        "@babel/preset-typescript"
      ]
    }
  }
}

4. 验证依赖完整性 #

确保所有必要的开发依赖都已安装：

npm install --save-dev typescript ts-loader @babel/core @babel/preset-react @babel/preset-typescript css-loader style-loader

总结 #

先修正tsconfig.json的JSX编译选项，这是解决当前解析错误的核心步骤，再修复CSS loader的正则问题，之后重新运行Webpack就能正常编译你的TSX组件了。

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