最近在自己配置脚手架项目，解决完这个问题，怀着无比激动的心情于凌晨2点写完第一篇分享。
背景
react17之后，无需引入React就可以使用JSX，官网文档。
问题描述
本文使用webpack^5.72.0 + react^18.0.5 + eslint^8.13.0 + ts^4.6.3配置后报错，报错如下：
'React' must be in scope when using JSX eslint（react/react-in-jsx-scope）
'React'指 UMD 全局，但当前文件是模块。请考虑改为添加导入。ts(2686)
Uncaught ReferenceError: React is not defined
在不引入React的前提下，参考cra项目弹出配置后的webpack.config.js的配置解决问题，关键变量hasJsxRuntime。
解决方案
1. Eslint静态代码检查报错： 'React' must be in scope when using JSX eslint（react/react-in-jsx-scope）
修改
.eslintrc.js（eslint配置文件）
extends：[ ..., 'plugin:react/jsx-runtime']
2. “React”指 UMD 全局，但当前文件是模块。请考虑改为添加导入。ts(2686)
修改
.tsconfig.json（ts配置文件）
"compilerOptions"：[
...,
"jsx": "react-jsx",
]
react-jsx和react-jsxdev是用来支持react17的_jsx构造方法。
// React 17 transform: "react-jsx"
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
export const HelloWorld = () => _jsx("h1", { children: "Hello world" });
// React 17 dev transform: "react-jsxdev"
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
const _jsxFileName = "/home/runner/work/TypeScript-Website/TypeScript-Website/index.tsx";
import React from 'react';
export const HelloWorld = () => _jsxDEV("h1", { children: "Hello world" }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 32 }, this);
3. 'React' must be in scope when using JSX eslint（react/react-in-jsx-scope）
修改
.babelrc.js（babel配置文件）
presets: [
[
'@babel/preset-env',
{
modules: false,
},
],
[ '@babel/preset-react', { runtime: 'automatic', // 这句是关键 }, ],
'@babel/preset-typescript',
],
cra-ts项目弹出配置后可以看一下这个位置的代码
第一次分享，有问题欢迎指正！
