Build issue: Expression produces a union type that is too complex to represent

• three version: "^0.135.0"
• @react-three/fiber version: "^7.0.24",
• @react-three/drei version: "^8.3.1",
• node version: n/a
• yarn) version: 1.21.1

Problem description:

Using drei somehow interferes with components defined in other libraries in production builds (Type error: Expression produces a union type that is too complex to represent.). The library works fine in development builds.

$ next build
Failed to compile.

./pages/index.tsx:12:7
Type error: Expression produces a union type that is too complex to represent.

  10 |   return (
  11 |     <div className={styles.container}>
> 12 |       <Button>
     |       ^
  13 |         Test
  14 |       </Button>
  15 |     </div>
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Relevant code:

I have created a repo that replicates the issue here

Steps to reproduce:

cd /tmp
git clone [email protected]:Dig-Doug/union-type-drei.git
cd union-type-drei/my-app
yarn install
yarn build

The code in the repo is mostly generated by the nextjs tool. The modifications are all in the index file shown below:

// pages/index.tsx
import 'bootstrap/dist/css/bootstrap.min.css';
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import {Button} from "react-bootstrap";
// NOTE: Removing the drei import removes the issue
import {OrbitControls} from '@react-three/drei';

export default function Home() {
  return (
    <div className={styles.container}>
      <Button>
        Test
      </Button>
    </div>
  )
}

Suggested solution:

I'm not sure what's going on here. However, I believe that the issue is related to drei and not react-bootstrap because after doing some searching I've found similar issues reported from people using other UI frameworks with drei. Example

What version of @types/three are you using? I don't see it in your repro example, could you try adding it to devDependencies?

I just tried it, but still no luck -- I get the same issue. I've updated the repo with it.

It looks like the types baked into @react-three/fiber are incompatible with the latest version of @types/three

There are four types that no longer exist in @types/three:

• ParametricBufferGeometry
• TextBufferGeometry
• ParametricGeometry
• TextGeometry

IIRC they're not part of the THREE namespace anymore. They're moved into examples. Could be wrong though.

Closing since this should be fixed.

This sis till occurring with the Box component from MUI.

Encountering the same issue as OP.

• three: "^0.140.0"
• @react-three/drei: "^9.11.0"
• @react-three/fiber: "^8.0.13"
• react-bootstrap: "^2.2.3"

When using Button from 'react-bootstrap' I get the following error: Expression produces a union type that is too complex to represent. ts(2590)

Will double-check to make sure it's not related to another one of my dependencies. However, just like OP, a quick search pointed me in this direction.

Also encountering the same issue as OP (Expression produces a union type that is too complex to represent.), however with the react-bootstrap Dropdown.Item component.

Tried updating to more recent versions but to no avail:

• "@react-three/drei": "^9.11.0"
• "@react-three/fiber": "^8.0.17"
• "three": "^0.140.2"
• "react-bootstrap": "^2.3.1"

In my devDependencies:

• "@types/three": "^0.140.0"

Having the same problem using the Material UI <Box> component.

• "@mui/material": "5.8.0"
• "@react-three/drei": "9.11.2"
• "@react-three/fiber": "8.0.19"
• "three": "0.140.2"

Using <Box component="div"> until this is fixed.

Insprired by Solution 2 of this question: https://stackoverflow.com/a/69348340

I'm facing a similar issue but with Chakra UI and spread operator.

import { Stack, StackProps } from "@chakra-ui/react";

type Props = { additional: string } & StackProps;

export function CustomStack({ additional, ...stackProps }: Props) {
  return <Stack {...stackProps} />;
}

This code is ok until importing drei, but after import, it raises Expression produces a union type that is too complex to represent.

I guessed extensions of JSX.IntrinsicElements are affecting the complexity of components so deleted all of them.

// core/Image.d.ts, for example
declare global {
    namespace JSX {
        interface IntrinsicElements {
            imageMaterial: ImageMaterialType;
        }
    }
}

This worked in my case, though just a temporary workaround.

versions:

• "@chakra-ui/react": "2.2.1"
• "react": "18.2.0"
• "three": "0.142.0"
• "typescript": "4.7.4"
• "@react-three/drei": "9.16.0"
• "@react-three/fiber": "8.0.27"
• "@types/three": "0.141.0",

I'm going to lock this issue for now, because realistically as I see it, this is probably a TS compiler problem as we have faced similar issues in react-spring – https://github.com/pmndrs/react-spring/issues/1515