react-google-maps-api
react-google-maps-api copied to clipboard
Components produce error TS2590: Expression produces a union type that is too complex to represent
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/[email protected]_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;