JSX编译报错提示Unexpected token，建议写{'}'}或}如何解决？

错误触发原因 #

你的JSX代码存在标签闭合语法错误：外层开启的<div>标签没有正确闭合，你误将闭合标签</div>写成了自闭合标签<div/>。
JSX解析规则要求所有开启的容器标签必须有对应的闭合标签，你的代码中未闭合的<div>会让解析器持续等待闭合标记，直到读取到return语句的右括号)时，识别到不符合预期的token，因此抛出该报错。

排查修复方案 #

• 直接修正标签闭合写法：将代码末尾的<div/>替换为</div>即可解决问题，修正后的完整代码如下：

function CompositeCntl() {
  return (
    <div>
      <Button />
      <Display />
    </div>
  );
}

• 日常开发规避方案：项目中接入ESLint + eslint-plugin-react 规则集，开启JSX标签闭合校验规则，编码阶段就会实时提示这类语法错误，不用等到运行时才排查。

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