ReactDOM.render(<Index />，报错

Question

Module parse failed: Unexpected token (19:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|
> ReactDOM.render(<Index />, document.getElementById('app'));
|
| export default Index;

有大佬遇到过吗？
说实话，我的 loader 和 babel 配置看了很久都没发现和官方有啥区别

补充，loader 部分看到过类似的问题，但是修正后并没有解决
附上链接：https://segmentfault.com/q/10...

这个是 loader 配置
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    // options: {
                    //     presets: [
                    //         "@babel/preset-react",
                    //         "@babel/preset-env"
                    //     ]
                    // }
                },
                exclude: [
                    resolve('public'),
                    resolve('node_modules'),
                ],
                include: [resolve('src')],
            }

这个是 .babelrc 配置
{
  "presets": [
    // "@babel/preset-env", 
    // "@babel/preset-react",
    [
      "@babel/preset-env", 
      {
        "modules": false,
        "targets": {
          "browsers": ["Chrome >= 54"]
        }
      }
    ],
    [
      "@babel/preset-react",
      {
        "pragma": "dom",            // default pragma is React.createElement (only in classic runtime)
        "pragmaFrag": "DomFrag",    // default is React.Fragment (only in classic runtime)
        "throwIfNamespace": false,  // defaults to true
        "runtime": "classic"        // defaults to classic
        // "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)
      }
    ],
    ["@babel/preset-typescript"]
  ],
  "plugins": [
    // 解析识别 import 动态导入语法、
    // "syntax-dynamic-import",
    ["@babel/plugin-syntax-dynamic-import"],
    // 隔离 import 引入对象和全局变量
    ["@babel/plugin-transform-runtime"],
    // 优化修饰符
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    // 箭头函数优化
    ["@babel/plugin-proposal-class-properties", {"loose": true}],
    // 优化编译内容的打包
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
    // 标记私有变量
    ["@babel/plugin-proposal-private-methods", { "loose": true }]
  ]
}

Answer 1

如果你使用的 React 版本是 17+，可以看看官方文档里这一个博客 https://reactjs.org/blog/2020...

React 从 17 版本开始全面变更了其解析 JSX 语法的方式，对应的 babel 插件配置也需要进行修改。

如果你使用的不是 17 以上版本的话，我直觉感觉是部分依赖安装失败，可以尝试移除 node_modules 之后重新安装。