如何修复React组件懒加载时出现的Module parse failed错误

该编译错误本质是构建工具未配置对应转译规则识别JSX语法，当前仅source-map-loader处理了目标文件，该loader仅负责源映射解析，不具备JSX转译能力，因此遇到<Fragment>这类JSX标签时直接抛出语法无法识别的错误。

• 首先检查报错对应文件的后缀：大部分构建工具默认仅会对.jsx/.tsx后缀文件开启JSX语法支持，若你在.js后缀文件中编写了JSX语法，会直接触发该报错
• 其次检查构建工具的转译配置：确认是否已正确安装并配置babel-loader（webpack场景）或@vitejs/plugin-react（vite场景）这类React语法转译插件，同时检查插件的文件匹配规则是否排除了当前报错的文件路径
• 最后检查依赖版本：React懒加载相关的Suspense、lazyAPI仅在React 16.6及以上版本支持，若版本过低也会触发兼容问题

方案1：修正文件后缀 #

将编写了JSX语法的文件后缀修改为.jsx（TypeScript项目修改为.tsx），TS项目同时需要确认tsconfig.json中的compilerOptions.jsx配置项已设置为react-jsx或react。

方案2：调整构建配置支持.js文件的JSX语法 #

如果不希望修改文件后缀，可以手动调整构建规则：

webpack场景示例，修改babel-loader匹配规则：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // 原有仅匹配.jsx的规则新增.js匹配
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
}

同时确认Babel配置已添加React预设：

// babel.config.json
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

方案3：校验懒加载语法正确性 #

确认懒加载相关代码符合规范，参考写法如下：

import { lazy, Suspense, Fragment } from 'react';
// 懒加载目标组件
const LazyComp = lazy(() => import('./components/LazyComp'));

function Main() {
  return (
    <Fragment>
      <Suspense fallback={<div>组件加载中...</div>}>
        <LazyComp />
      </Suspense>
    </Fragment>
  )
}

内容的提问来源于stack exchange，提问作者islandguy