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

[Dig-Doug]

• 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 git@github.com: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

[bjornstar]

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

[Dig-Doug]

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

[bjornstar]

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

[joshuaellis]

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

[Dig-Doug]

Closing since this should be fixed.

[ajnozari]

This sis till occurring with the Box component from MUI.

[LoukaOctave]

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.

[sabigara]

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",

[joshuaellis]

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 – pmndrs/react-spring#1515