找不到模块：无法解析“@mui/material”

Module not found: Can’t resolve ‘@mui/material’

要解决错误“找不到模块：错误：无法解析’@mui/material’”，请确保通过在项目根目录中打开终端并运行命令
npm i @mui/material @emotion/react @emotion/styled并重新启动开发服务器来安装包。

找不到模块无法解析 mui 材料

在项目的根目录（package.json
文件所在的位置）中打开终端并运行以下命令：

壳


# 👇️ with NPM
npm install @mui/material @emotion/react @emotion/styled --force

# 👇️ only if you use @mui/icons-material
npm install @mui/icons-material --force

# 👇️ only if you use @mui/lab
npm install @mui/lab --force

# ----------------------------------------------

# 👇️ with YARN
yarn add @mui/material @emotion/react @emotion/styled

# 👇️ only if you use @mui/icons-material
yarn add @mui/icons-material

# 👇️ only if you use @mui/lab
yarn add @mui/lab

如果在安装包时出现错误，请--force在末尾添加标志。

该命令会将
@mui/material包添加到项目的依赖项中。

如果您使用
@mui/icons-material和
@mui/lab包，请确保按照上述说明安装它们。

如有必要，请确保重新启动开发服务器和 IDE。在您停止并重新运行命令之前，您的开发服务器不会接受更改。 npm start

您现在应该能够@mui/material在 React.js 应用程序中导入和使用该包。

应用程序.js


import Button from '@mui/material/Button';

function App() {
  return (
    <div>
      <p>
        Hello world
        <Button variant="contained" color="primary">
          Click
        </Button>
      </p>
    </div>
  );
}

export default App;

如果错误未解决，请尝试删除您的node_modules和
package-lock.json（不是package.json）文件，重新运行npm install并重新启动您的 IDE。

壳


# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Make sure to restart your IDE and dev server if the error persists. VSCode often glitches and a reboot solves things sometimes.

If you’re still getting the “Module not found: Error: Can’t resolve
‘@mui/material'” error, open your package.json file and make sure it contains
the @mui/material package in the dependencies object.

package.json


{
  // ... rest
  "dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.5.1",
    "@mui/lab": "^5.0.0-alpha.75",
    "@mui/material": "^5.5.3",
  },
}

The @mui/material module should NOT be globally installed or be in your
project’s devDependencies, it should be in the dependencies object in your
package.json file.

You can try to manually add the lines and re-run npm install.

shell


npm install

Or install the latest version of the package:

shell


npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest --force

# 👇️ only if you use @mui/icons-material
npm install @mui/icons-material@latest --force

# 👇️ only if you use @mui/lab
npm install @mui/lab@latest --force

Conclusion #

–