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

【问题标题】：tsconfig.json jsx is preserve when Webpack ts-loader shows "Module parse failed: Unexpected token"当 Webpack ts-loader 显示“模块解析失败：意外令牌”时，tsconfig.json jsx 被保留
【发布时间】：2019-07-08 19:48:39
【问题描述】：

想用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 })
  ]
}

【问题讨论】：

标签： typescript jsx ts-loader

【解决方案1】：

我可以通过添加 babel-loader 来解决类似的问题。试试这样的：

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

【讨论】：