Vue.js集成TSX时tsx-loader报错，求助解决方案

我之前也碰到过完全一样的报错！确实是你推测的包版本不匹配导致的，尤其是vue-loader和webpack的版本组合在处理TSX时存在兼容性细节问题，下面是我亲测有效的解决方案：

1. 调整核心依赖版本 #

你的webpack@3.6.0需要搭配特定版本的vue-loader才能正常处理TSX，建议把vue-loader升级到14.2.4（这个版本和webpack3.x兼容性最好），同时必须保证vue-template-compiler的版本和vue-loader完全一致——这是vue-loader的硬性要求，版本不匹配会直接导致编译报错。

在package.json里修改依赖后，执行：

rm -rf node_modules package-lock.json
npm install

2. 修正webpack配置（针对vue-cli默认模板） #

找到build/webpack.base.conf.js，调整以下两处：

• 添加TSX文件的处理规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // 把tsx规则放在vue规则前面
      {
        test: /\.tsx?$/,
        loader: 'tsx-loader',
        exclude: /node_modules/,
        options: {
          appendTsxSuffixTo: [/\.vue$/]
        }
      },
      // 原有的vue-loader规则
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // 新增：让vue-loader识别tsx类型的script
          loaders: {
            tsx: 'tsx-loader'
          },
          // ...其他vue-loader配置
        }
      }
    ]
  }
}

• 确保resolve.extensions里包含.tsx：

resolve: {
  extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
  // ...其他配置
}

3. 检查tsconfig.json配置 #

确保你的tsconfig.json里开启了JSX支持，并且适配Vue的TSX语法：

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxFactory": "h",
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "moduleResolution": "node"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

为什么克隆的启动模板能正常运行？ #

因为官方或社区的启动模板会预先锁定所有依赖的版本，确保webpack、vue-loader、tsx-loader等工具之间的兼容性，不会出现版本冲突导致的编译报错。

按照上面的步骤调整后，重新启动项目应该就能解决这个加载器报错了！

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