Hi, I am building a Next.js app on top of Mapkit JS but I keep getting this error randomly. The map works most of the time but this error triggers randomly sometimes when the map loads even though I have not used the fillOpacity parameter at all. Even defining the parameter still causes the error.
mapkit.js:2 Uncaught TypeError: [MapKit] Expected a number value for Style.fillOpacity, but got NaN instead.
at Object.checkType (mapkit.js:2:205350)
at set fillOpacity (mapkit.js:2:670243)
at set fillOpacity (mapkit.js:2:673537)
at _.performScheduledUpdate (mapkit.js:2:643649)
at mapkit.js:2:221322
at m (mapkit.js:2:221358)
Code: import React, { useEffect, useRef } from "react"
import { useTheme } from "next-themes"
declare global {
interface Window {
mapkit: any
}
}
interface MapKitProps {
latitude: number
longitude: number
zoom: number
}
const MapKit: React.FC<MapKitProps> = ({ latitude, longitude, zoom }) => {
const mapRef = useRef<HTMLDivElement>(null)
const mapInstanceRef = useRef<any>(null)
const { setTheme, theme } = useTheme()
useEffect(() => {
if (window.mapkit && mapRef.current) {
window.mapkit.init({
authorizationCallback: (done: (token: string) => void) => {
const token = process.env.NEXT_PUBLIC_APPLE_MAPKIT_TOKEN
if (token) {
done(token)
} else {
console.error("MapKit JS token is not set")
}
},
})
// Clean up the previous map instance if it exists
if (mapInstanceRef.current) {
mapInstanceRef.current.destroy()
}
// Create a new map instance
mapInstanceRef.current = new window.mapkit.Map(mapRef.current, {
center: new window.mapkit.Coordinate(latitude, longitude),
zoom: zoom,
colorScheme: theme,
_allowWheelToZoom: true,
})
}
// Cleanup function to destroy the map instance when the component unmounts
return () => {
if (mapInstanceRef.current) {
mapInstanceRef.current.destroy()
}
}
}, [latitude, longitude, zoom])
return <div ref={mapRef} style={{ width: "100%", height: "100%" }} />
}
export default MapKit
