Heroku部署React时Login.jsx报react-in-jsx-scope错误

报错原因 #

这个ESLint报错触发逻辑非常明确：你当前项目的构建规则要求，所有包含JSX语法的组件文件必须将React对象引入当前作用域。你的Login.jsx文件仅从react包中导入了useRef、useState两个Hook，没有默认导入React，因此所有写了JSX标签的代码行都会触发规则拦截，导致Heroku编译阶段失败。

修复方案 #

你可以根据自己项目的React版本，二选一使用下面的方案：

方案1：补全React导入（全React版本通用，无额外配置） #

这是兼容性最好、改动最小的修复方式，直接修改Login.jsx顶部的react导入语句，补全默认导入的React即可：

// 将原来的 import { useRef, useState } from "react"; 替换为下面这行
import React, { useRef, useState } from "react";

额外提醒：你贴的代码里return的JSX块中残留了here its starting、hear it's finish两行无效文本，这两行不属于合法JSX语法，记得删掉，否则修复导入后还是会报语法错误。如果要在JSX里写注释，需要使用{/* 注释内容 */}的格式。

方案2：React 17+ 版本免导入配置 #

如果你的项目使用React 17及以上版本，可使用官方推出的新JSX转换特性，不需要在每个组件文件里导入React，只要修改ESLint配置关闭对应规则即可：

• 找到项目根目录的ESLint配置文件，可能是.eslintrc.js、.eslintrc.json，或是package.json里的eslintConfig字段
• 在rules配置项中添加如下规则，关闭作用域检查：

{
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

注意：React 17以下版本不要使用这个方案。老版本JSX会被编译为React.createElement()调用，缺少React对象会直接导致页面运行时报错。如果你是用create-react-app搭建的项目，确保react-scripts版本在4.0.0及以上，才默认支持新JSX转换。

改完后重新推送到Heroku触发编译即可正常部署。

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