ReactJS编译报错：App.js出现Unexpected token语法错误求助

核心原因定位 #

你遇到的报错是App.js第13行第9位出现无法识别的语法标记，对应你贴出的代码，该位置就是Fragment短语法的起始符号<>，以下是按优先级排列的解决方法：

• 方法1：替换Fragment短语法（最优先尝试）
  如果你的项目React版本低于v16.2，不支持<>简写形式，把代码中所有的<>替换为<React.Fragment>，</>替换为</React.Fragment>即可，修改后的对应代码段示例：

return (
  <Layout>
    {githubState.hasUser ? (
      <React.Fragment>
        {githubState.loading ? (
          <p>Loading</p>
        ) : (
          <React.Fragment>
            <Profile />
            <Repositories />
          </React.Fragment>
        )}
      </React.Fragment>
    ) : (
      <NoSearch />
    )}
  </Layout>
);

• 方法2：清除隐藏字符
  如果是复制粘贴代码带入了不可见的特殊字符，直接删除第13行整行内容，手动重新编写该行代码即可。
• 方法3：修复依赖问题
  删除项目根目录下的node_modules文件夹、package-lock.json文件，重新执行npm install安装所有依赖后再启动项目。
• 方法4：恢复默认编译配置
  如果你手动修改过项目的babel配置或者webpack配置，恢复create-react-app的默认配置即可，默认配置已完整支持JSX语法转译。

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