TS Expression produces a union type that is too complex to represent with Material-UI and @react-three/fiber

I create a Next.js application that use Material-UI and @react-three/fiber library.

I recently pass Material-UI to V5 and a error is appear.

Here is the error:

I search everything to remove it but I found nothing.

So I try to create a new project with Material-UI V5 and I install other dependency one by one. In the begin the error is not show but when I install @react-three/fiber AND @react-three/drei the error appear.

So I found that a Box component is exported from @material-ui and @react-three/drei so I understand now the error.

Here is my 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"
  }
}

My 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"]
}

But I don't found how to fix it...

Someone have idee?

Solution 1

The stable version of MaterialUI fix this problem.

Use this package:

npm install @mui/material

Solution 2 by Vivere

Add the component props to a div to avoid TypeScript error.

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

I had the same error because of importing @react-three/drei. I have successfully localized files, which cause the error to appear, but i'm unable to determine the root cause. I would appreciate all input from more TypeScript-savvy people out there.

This is a rather ugly workaround. Delete all of these definition files:

• node_modules/@react-three/drei/core/
  • MeshWobbleMaterial.d.ts
  • MeshDistortMaterial.d.ts
  • PointMaterial.d.ts (<- for newer versions)

Of course now you can't use these Components in a Typescript context now.

You can share and pin these changes by using patch-package. This will setup a post install step, that will apply the changes (deleted files) after running npm/yarn install.