执行npm start遇Module parse failed错误，React项目编译失败求助

问题描述 #

运行npm start编译React+TypeScript项目时，./src/layouts/BookCheckoutPage/BookCheckoutPage.tsx文件报错：

Failed to compile. 

./src/layouts/BookCheckoutPage/BookCheckoutPage.tsx 131:10

Module parse failed: Unexpected token (131:10)

You may need an appropriate loader to handle this file type.

|       columnNumber: 21
|     }
>   }, book?.img ? /*#__PURE__*/React.createElement("img", {
|     src: book?.img,
|     width: "226",

已排除TypeScript配置、require方法等常见问题（项目中ReturnBook组件使用类似逻辑未报错）。

解决方案 #

1. 确认文件扩展名 #

检查BookCheckoutPage.tsx的扩展名是否为.tsx而非.ts——包含JSX语法的文件必须用.tsx扩展名，否则加载器不会处理其中的JSX代码。对比ReturnBook组件的扩展名，确保二者一致。

2. 检查Webpack/Babel配置（自定义配置场景） #

如果项目使用自定义Webpack配置，确保.tsx文件的处理规则正确：

• 使用ts-loader的Webpack配置示例：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
  };
  

• 使用Babel的场景，确保已安装@babel/preset-react和@babel/preset-typescript，并在.babelrc或babel.config.json中启用：

  {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ]
  }
  

3. 修复Create React App环境问题（CRA场景） #

如果项目基于Create React App：

• 升级react-scripts版本：运行npm update react-scripts
• 清理依赖缓存：删除node_modules和package-lock.json，执行npm install后重启npm start

4. 验证TypeScript配置 #

确保tsconfig.json支持可选链语法和JSX：

{
  "compilerOptions": {
    "target": "ES2020", // 或更高版本
    "lib": ["DOM", "ES2020"],
    "jsx": "react-jsx" // 或"react"，根据React版本调整
  },
  "include": ["src/**/*"] // 确保目标文件被包含在编译范围内
}

5. 排查代码语法细节 #

虽然报错指向加载器，但隐性语法错误也可能触发该提示：

• 确认所有JSX标签正确闭合（如<img>标签的/>）
• 检查三元运算符的逻辑是否完整，无语法遗漏

验证步骤 #

修改配置或代码后，执行以下操作：

1. 停止当前npm start进程
2. 运行npm start --clear-cache清除缓存后重启编译
3. 尝试将ReturnBook组件的图片渲染逻辑复制到BookCheckoutPage中，测试是否仍报错

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