这是由于从'react'导入错误的模块react而导致的错误，您试试这个如何: 1日

import React , { Component}  from 'react';

或者你也可以试试这个:

import React from 'react';
import { render   }  from 'react-dom';

class TechView extends React.Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath',
       }
    }
    render(){
        return(
            <span>hello Tech View</span>
        );
    }
}

export default TechView;

我注意到的一件事是从“React”导入React;应该在那里，而不是import react， {Component} from 'react'; 我做过的其他事情是，

(1)添加以下行到index.js文件。

import React from 'react'
import ReactDOM from 'react-dom'

如果没有工作，添加这一行从“react-dom/client”导入ReactDOM;而不是从'react-dom'导入ReactDOM

(2)修改eslint配置文件的以下属性。

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

但是从React 17开始，不需要添加import React from ' React '和next js

import React, { Component } from 'react';

这是一个拼写错误，你需要输入React而不是React。

下面这行为我解决了这个问题。

/** @jsx jsx */
import {css, jsx} from "@emotion/react";

希望这对你有帮助。

在使用react框架时，首先需要从react中导入react，并且在导入后始终保持react的首字母大写。

import React, {Component} from 'react'`

import React, { Component} from 'react';
import { render }  from 'react-dom';

class TechView extends Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath'
       } 
    }
    render(){
        return(
            <span>hello Tech View</span>
        );
    }
}
export default TechView;

将以下设置添加到.eslintrc.js / .eslintrc.json以忽略这些错误:

  rules: {
    // suppress errors for missing 'import React' in files
   "react/react-in-jsx-scope": "off",
    // allow jsx syntax in js files (for next.js project)
   "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
  }

为什么? 如果你正在使用NEXT.js，那么你不需要在文件顶部导入React, nextjs会为你做这件事。

参考： https://gourav.io/blog/nextjs-cheatsheet （下一页.js备忘单）