Components produce error TS2590: Expression produces a union type that is too complex to represent

[bear-bibeault]

Please provide an explanation of the issue

Using CircleF in a typescript file produces the error "error TS2590: Expression produces a union type that is too complex to represent."

The problem has also been observed using MarkerF and PolygonF.

Some research shows that TypeScript limits union types to 100,000 members, so I suspect some type is exceeding that limit.

Your Environment

os: macOS Monterey

node --version v16.12.0

react version 18.2.0

tsup 6.1.3

@react-google-maps/api version 2.18.1

How does it behave?

During a tsup build, components using CircleF (in this example) fail to compile:

ui:build: src/maps/RangePlugin.tsx(15,7): error TS2590: Expression produces a union type that is too complex to represent.
ui:build:
ui:build: Error: error occured in dts build
ui:build:     at Worker.<anonymous> (/Users/b351059/Dropbox/Development/projects/aw-next/aw-uis-next/node_modules/.pnpm/tsup@6.6.3_uujdqti2krmttzhqvubwnsmcci/node_modules/tsup/dist/index.js:2281:26)
...

Note: the problem is inconsistent. Sometimes the build goes fine. But while developing, the problem always comes back.

How should it behave correctly?

Components using CircleF, MarkerF, or PolygonF should compile successfully.

Basic implementation of incorrect behavior in codesandbox.com

Example component:

import { CircleF } from "@react-google-maps/api";

const center: google.maps.LatLngLiteral = {
  lat: 30.7,
  lng: -97.7,
};

const RangePlugin = () => {
  return (
    <>
      <CircleF
        center={new google.maps.LatLng(center)}
        radius={1000}
        options={{
          fillOpacity: 0,
          strokeColor: "red",
          strokeOpacity: 1,
          strokeWeight: 1,
        }}
      />
    </>
  );
};

export default RangePlugin;