使用Material UI AppBar组件时遇到react中不存在useInsertionEffect（导入为useInsertionEffect$1）的错误

Hey there! That error you're hitting with the Material UI AppBar component boils down to a version mismatch between React and Material UI (MUI). Let me break it down and walk you through the fixes:

The useInsertionEffect hook was introduced in React 18. If your project is running an older React version (like 17 or below), newer MUI releases (v5.10+) that rely on this hook won't be able to find it in your React package—hence the error.

Solution 1: Upgrade React to Version 18 (Recommended) #

This is the best long-term fix to keep your dependencies current and avoid future compatibility issues. Run the appropriate command for your package manager:

• For npm:

  npm install react@latest react-dom@latest
  

• For Yarn:

  yarn add react@latest react-dom@latest
  

Restart your dev server after upgrading, and the AppBar component should work as expected.

Solution 2: Downgrade Material UI to a React 17-Compatible Version #

If you can't upgrade React right now (due to project constraints), use an older MUI release that doesn't depend on useInsertionEffect. Install these compatible versions:

• For npm:

  npm install @mui/material@^5.9.0 @mui/icons-material@^5.9.0 @emotion/react@^11.9.0 @emotion/styled@^11.8.1
  

• For Yarn:

  yarn add @mui/material@^5.9.0 @mui/icons-material@^5.9.0 @emotion/react@^11.9.0 @emotion/styled@^11.8.1
  

Quick Double-Check #

Make sure you're not accidentally importing useInsertionEffect directly from React (unless you need it for custom styling)—but in most cases, this error is purely a version mismatch issue.

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