React报错:

'React' must be in scope when using JSX react/react-in-jsx-scope

意思是在使用JSX时,没有引入React,比如像这样:

import { useState } from 'react';

const App = () => {

	const [count, setCount] = useState(0);
	
	return <>
		<h3>点击了{count}</h3>
		<button onClick={() => {setCount(count + 1)}>click me</button>
	</>
}

在使用import引入时,没有引入React。所以在被Eslint"plugin:react/recommended"检查时,就会报错。

于是很多人就选择引入的时候加上React,这样

import React, { useState } from 'react';

这样确实不报错了,但是他们忽略了一个版本事实:

React@17以后,是不需要再手动去引入React的。因为该版本之后加入了react/jsx-runtime,会自动对JSX进行解析。

现在报错,就是因为eslint中的extends中没有加入这个runtime,加上就可以了

// .eslintrc.js

module.exports = {
	// ...
	extends: [
		"eslint:recommended",
        "plugin:react/recommended",
        // 加上这一条
        "plugin:react/jsx-runtime"
	]
	// ...
}

问题解决。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐