问题描述
我创建了一个Next.js应用程序,它使用Material-UI和@Reaction-Three/Fibre库。
我最近将Material-UI传递给V5,出现错误。
以下是错误:我搜索了所有内容以将其删除,但什么也没有找到。
所以我尝试使用Material-UIV5创建一个新项目,并逐个安装其他依赖项。在开始时未显示错误,但在安装@react-three/fiber
和@react-three/drei
时出现错误。
所以我发现Box
组件是从@material-ui
和@react-three/drei
导出的,所以我现在明白了错误。
这是我的package.json
:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^5.0.0-beta.2",
"@material-ui/styles": "^4.11.4",
"@react-three/fiber": "^7.0.6",
"next": "11.0.1",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"@types/react": "17.0.16",
"eslint": "7.32.0",
"eslint-config-next": "11.0.1",
"typescript": "4.3.5"
}
}
我的tsconfig.json
{
"compilerOptions": {
"baseUrl": "src",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
但我找不到如何修复它...
有人知道了吗?
推荐答案
解决方案1
稳定版本的MaterialUI解决了此问题。
使用此程序包:
npm install @mui/material
解决方案2Vivere
将component
道具添加到div
以避免打字错误。
<Box component="div">...</Box>