如何修复React项目运行时出现的invalid hook call报错？

刚开始学习React，跟随YouTube教程做项目开发时，从Material-UI官网复制了AppBar相关代码，运行时出现报错。操作步骤完全和教程一致，但教程演示者没有遇到相同问题。
代码在VS Code中可正常编译，在Chrome浏览器运行时抛出错误，报错截图如下：

涉及代码如下：

App.js 文件代码 #

import './App.css';
import AppBar from './AppBar';

function App() {
  return (
    <div className="App">
    <AppBar/>
    </div>
  );
}

export default App;

AppBar.js 文件代码 #

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function ButtonAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

报错由两类常见问题触发，按顺序排查即可解决：

• 命名冲突+导入导出不匹配
  你自己编写的组件文件名为AppBar.js，文件内部又从MUI依赖中导入了同名的AppBar组件，同时该文件导出的组件实际名称为ButtonAppBar，和App.js中导入时使用的名称不一致，很容易触发模块解析错误、循环引用问题。
  修复方式二选一即可：

  1. 把自定义组件文件重命名为ButtonAppBar.js，和导出的组件名保持一致，同时把App.js中的导入语句修改为import ButtonAppBar from './ButtonAppBar'，JSX中使用的标签同步替换为<ButtonAppBar />
  2. 不修改文件名的话，就在AppBar.js中给MUI导入的AppBar组件起别名，比如改成import MuiAppBar from '@mui/material/AppBar'，文件内所有使用MUI原生AppBar组件的位置全部替换为<MuiAppBar>，避免命名冲突。

• MUI依赖安装不全
  MUI v5版本依赖emotion作为样式引擎，很多新手只安装了@mui/material包，漏装了必需的依赖项，就会出现编译无报错但浏览器运行时报错的问题。
  在项目根目录执行对应包管理器的安装命令补全依赖即可：
  如果使用npm：

  npm install @emotion/react @emotion/styled @mui/icons-material
  

  如果使用yarn：

  yarn add @emotion/react @emotion/styled @mui/icons-material
  

依赖安装完成后重启本地开发服务，清空浏览器缓存刷新页面即可正常运行。

新手阶段跟着教程练习时，尽量不要随意修改组件文件名、导入导出名，这类低级错误很容易浪费大量排查时间，等熟悉React模块机制后再自由调整命名规则即可。

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