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

Question

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?

Answer 1

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>

Answer 2

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.

Answer 3

If you're using VS Code

---

This worked for me (TLDR)

1. create a .vscode directory and add the settings.json file.
2. Add this configuration

   {
     "typescript.enablePromptUseWorkspaceTsdk": true
   }
   

---

Context

if you're using vs code and seeing this error. This was because of an inconsistent typescript version between what vscode internally uses to provide ts-related features and the typescript versions you're using in your app.

I tried this option

https://stackoverflow.com/a/74847054/13822685

but could not follow since the latest version of VS Code does not show the option to switch TS version to the workspace version in case you've never enabled this before. Below are the version details.

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

---

So typescript.enablePromptUseWorkspaceTsdk will force the vscode to use the typescript version of the current workspace that is likely to fix this issue.

Answer 4

I solved mine by adding this to tsconfig.json.

"jsx": "react",
"lib": ["ES5", "ES2015", "ES2016", "DOM", "ES2015.Promise"],
"module": "esnext",
"moduleResolution": "node",

Answer 5

I've encountered this same issue with @react-three/fiber and chakra-ui

This is what worked for me. Cast the props as any. This may be a hacky way to do things but it does clear out the warning.

see sample code here:

import NextLink from 'next/link';
import { Link as CharkaLink, LinkProps } from '@chakra-ui/react';

export interface ICustomLinkProps extends LinkProps {
  href: string;
  external?: boolean;
}

const CustomLink = (props: ICustomLinkProps) => {
  const { href, children, color = 'teal.500' } = props;
  
// typecast to any to prevent issues with props from three/drei or three/fiber
  const propsAny = props as any;
  return (
    <NextLink href={href} passHref legacyBehavior>
      <CharkaLink color={color} {...propsAny}>
        {children}
      </CharkaLink>
    </NextLink>
  );
};

export default CustomLink;