当Webpack ts-loader显示“模块解析失败:意外令牌”时，tsconfig.json jsx会被保留

Question

我想用Webpack将.tsx转换成.jsx，我搜索了一些信息，发现刚刚在tsconfig.json中设置了jsx来保留，但是webpack ts-loader解析失败了，它显示了错误代码：

ERROR in ./index.tsx 4:15
Module parse failed: Unexpected token (4:15)
You may need an appropriate loader to handle this file type.
| export default class Home extends React.Component {
|     render() {
>         return <div>
|       <p>hello world</p>
|     </div>;

如果jsx是react，就没有这样错误，我该如何处理这个问题？

以下是我的一些文件：

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve"
  },
  "compileOnSave": false
}

index.tsx

import * as React from 'react'

type Props = {}

export default class Home extends React.Component<Props>{
  render(): React.ReactNode {
    return <div>
      <p>hello world</p>
    </div>
  }
}

package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "fork-ts-checker-webpack-plugin": "^0.5.2",
    "happypack": "^5.0.1",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "react": "^16.8.1"
  }
}

webpack.config.js

const fs = require('fs')
const path = require('path')
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = {
  entry: './index.tsx',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: 'happypack/loader?id=ts'
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'ts',
      loaders: [
        {
          loader: 'ts-loader',
          query: { happyPackMode: true }
        }
      ],
      threadPool: happyThreadPool,
      verbose: true
    }),
    new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true })
  ]
}

Answer 1

我可以通过添加babel-loader来解决类似的问题。尝试如下所示：

  rules: [
    {
      test: /\.(tsx|ts)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
        },
        {
          loader: 'happypack/loader?id=ts'
        },
      ],
    },