TS 表达式生成的联合类型过于复杂，无法用 Material-UI 和 @react-three/fiber 表示

Posted 2023-02-27

【中文标题】TS 表达式生成的联合类型过于复杂，无法用 Material-UI 和 @react-three/fiber 表示

【英文标题】：TS Expression produces a union type that is too complex to represent with Material-UI and @react-three/fiber

【发布时间】：2021-10-11 23:26:21

【问题描述】：

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

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

这是错误：

我搜索了所有内容以将其删除，但我一无所获。

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

由于导入@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 后应用更改（已删除的文件）。

【讨论】：

谢谢，但如果你重做npm install，被删除的模块会再次出现吗？

这将由patch-package 解决。当您将 "postinstall": "patch-package" 放入您的 package.json 时，在 npm install 期间下载软件包后，此脚本将删除 .d 文件（如果存在）。请查看补丁包的说明，或在需要帮助时问我！

成功了！！！这太糟糕了！

【参考方案2】：

解决方案 1

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

使用这个包：

npm install @mui/material

Vivere 的解决方案 2

将 component 属性添加到 div 以避免 TypeScript 错误。

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

【讨论】：

我也遇到了这个错误。我了解@mui/material和三个库都导出了Box，但是为什么会出现这个错误呢？

不错不错。你走在好路上！这是我的 package.json：gist.github.com/Melvynx/f1b1402411d1d7ef1d47c58d90cebfac

所以我设法通过编写盒子的组件类型来解决它：<Box component="div" ... 这很奇怪，但它现在可以工作。我向mui 和fiber GitHub 提交了一个问题。希望我能得到某种指导，让我理解这种行为。

经过数小时的寻找，再次寻找，摸不着头脑，重命名模块，阅读 webpack 文档，阅读打字稿文章，github 问题日志，代码拆分，令人作呕，@Vivere 你的最后一条注释解决了这个问题。 .. 谢谢！ ...我应该注意，这也是使用巴比伦的一个问题...现在可以这样做，但是必须有比这更好的解决方法...

我在我的回答@Vivere 中添加了您的评论