TS Expression 生成的联合类型过于复杂，无法用 Material-UI 和 @react- Three/Fiber 表示

Question

我创建了一个使用 Material-UI 和 @react-two/fibre 库的 Next.js 应用程序。

我最近将Material-UI传递到V5并出现错误。

这是错误：

我搜索了所有内容以将其删除，但什么也没找到。

所以我尝试使用Material-UI V5创建一个新项目，并一一安装其他依赖项。一开始，错误没有显示，但是当我安装时@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"]
}

但我没有找到如何解决它......

有人有想法吗？

Answer 1

解决方案1

MaterialUI 的稳定版本修复了这个问题。

使用这个包：

npm install @mui/material

Vivere的解决方案 2

将componentprops 添加到 adiv以避免 TypeScript 错误。

<Box component="div">...</Box>

Answer 2

由于导入，我遇到了同样的错误@react-three/drei。我已成功本地化文件，这导致出现错误，但我无法确定根本原因。我非常感谢更多精通 TypeScript 的人提供的所有意见。

这是一个相当丑陋的解决方法。删除所有这些定义文件：

• node_modules/@react-three/drei/core/
  • MeshWobbleMaterial.d.ts
  • MeshDistortMaterial.d.ts
  • PointMaterial.d.ts（<- 对于较新版本）

当然，现在您不能在 Typescript 上下文中使用这些组件。

您可以使用patch-package共享和固定这些更改。这将设置一个安装后步骤，该步骤将在运行后应用更改（删除的文件）。npm/yarn install

Answer 3

如果您使用的是 VS Code

这对我有用（TLDR）

1. 创建一个.vscode目录并添加settings.json文件。
2. 添加此配置

   {
     "typescript.enablePromptUseWorkspaceTsdk": true
   }
   

语境

如果您使用 VS Code 并看到此错误。这是因为 vscode 内部用于提供 ts 相关功能的 typescript 版本与您在应用程序中使用的 typescript 版本不一致。

我尝试过这个选项

/sf/answers/5239293811/

但无法遵循，因为最新版本的 VS Code 没有显示将 TS 版本切换到工作区版本的选项，以防您以前从未启用过此功能。以下是版本详细信息。

Version: 1.74.2 (user setup)
Commit: e8a3071ea4344d9d48ef8a4df2c097372b0c5161
Date: 2022-12-20T10:29:14.590Z
Electron: 19.1.8
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Windows_NT x64 10.0.19044
Sandboxed: No

因此typescript.enablePromptUseWorkspaceTsdk，将强制 vscode 使用当前工作区的打字稿版本，这可能会解决此问题。