我想用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
}
索引.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>
}
}
包.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 })
]
}
最佳答案
我能够通过添加 babel-loader
来解决类似的问题。尝试这样的事情:
rules: [
{
test: /\.(tsx|ts)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
{
loader: 'happypack/loader?id=ts'
},
],
},
关于typescript - 当 Webpack ts-loader 显示 "Module parse failed: Unexpected token"时,tsconfig.json jsx 被保留,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54696257/