React项目出现“Unterminated JSX contents”解析错误的原因？

你的代码语法上看似无明显未闭合标签，但出现该报错通常有以下几种原因：

可能的原因 #

• Fragment短语法不被支持：你使用的<></>是React Fragment的短语法，部分旧版ESLint或Babel配置可能未正确识别该语法，导致解析器误判JSX未闭合。
• 文件存在不可见特殊字符：代码中可能混入了不可见的换行符、空格或其他特殊字符，干扰了ESLint的JSX解析逻辑。
• ESLint配置问题：ESLint的parser未正确配置支持JSX语法，或者parserOptions未开启JSX相关特性。

解决办法 #

1. 替换Fragment短语法为完整写法
   将<></>替换为<React.Fragment></React.Fragment>，修改后的代码如下：

   import React from 'react'
   import './App.css'
   import {BrowserRouter, Routes, Route} from 'react-router-dom';
   
   const App = () => {
     return (
       <React.Fragment>
         <BrowserRouter>
           <h2>hello</h2>
         </BrowserRouter>
       </React.Fragment>
     )
   } 
   
   export default App;
   

2. 检查并修复ESLint配置
   在项目根目录的.eslintrc（或.eslintrc.json）文件中，确保配置正确支持JSX：

   {
     "parserOptions": {
       "ecmaVersion": "latest",
       "ecmaFeatures": {
         "jsx": true
       }
     },
     "extends": [
       "eslint:recommended",
       "plugin:react/recommended"
     ],
     "plugins": ["react"]
   }
   

   同时确保已安装eslint-plugin-react依赖：

   npm install eslint-plugin-react --save-dev
   

3. 清理文件中的特殊字符
   使用文本编辑器的「显示所有字符」功能（比如VS Code中开启View > Toggle Render Whitespace），检查代码中是否有异常的不可见字符，删除后重新保存文件。

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