运行React项目报错:

Compiled with problems:X

ERROR in ./src/index.jsx

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/maomao/Documents/demo/pc/askteam/src/index.jsx: Support for the experimental syntax 'jsx' isn't currently enabled (10:3):

   8 | import zhCN from 'antd/es/locale/zh_CN'
   9 | ReactDOM.render(
> 10 |   <ConfigProvider locale={zhCN}>
     |   ^
  11 |     <App />
  12 |   </ConfigProvider>,
  13 |   document.getElementById('root')

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

提示添加@babel/preset-react,如果你没有添加,可以尝试添加,但是我这里是已经添加了@babel/preset-react

所以我的问题是因为没有添加Typescript的编译插件:ts-loader

解决办法

1. 安装ts-loader

npm intall --save-dev ts-loader

2. 在webpack的rules中添加ts-loader


module.exports = {
  module: {
    //模块
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: [
          {
            //用 babel-loader 把es6转es5
            loader: 'babel-loader'
          },
          'ts-loader'
        ],
        exclude: /node_modules/
      },
    ]
  }
}