Getting occasional mapkit is not defined error

[pdugan20]

Occasionally seeing this in sentry logs:
https://sentry.io/share/issue/87d00d547d6d457eb3833070dbe63cf7/

ReferenceError: mapkit is not defined

Seems related to this separate issue:
https://sentry.io/share/issue/0701b217503d42438c008c3209de2333/

TypeError: Cannot read property 'disguiseToken' of undefined

I have a file called MapKitProvider.js:

import dynamic from 'next/dynamic';

const MapkitProvider = dynamic(() =>
    import('react-mapkit').then((mod) => mod.MapkitProvider),
);

export default MapkitProvider;

...which I import at the top of my app:

class HikeAround extends App {
    render() {
        const { Component, pageProps, router, err } = this.props;
        const theme = getTheme();

        return (
            <ToastProvider
                autoDismiss
                autoDismissTimeout={settings.autoDismissTimeout}
                placement={settings.placement}
                components={{ Toast }}
            >
                <ThemeProvider theme={theme}>
                    <MapkitProvider
                        tokenOrCallback={NEXT_PUBLIC_MAPKIT_TOKEN}
                        language={router.locale}
                    >
                        <SimpleReactLightbox>
                            <Component {...pageProps} err={err} />
                        </SimpleReactLightbox>
                    </MapkitProvider>
                </ThemeProvider>
            </ToastProvider>
        );
    }
}

...any ideas?

[chrisdrackett]

I don't have a lot of experience with dynamic modules. My first guess is this has something to do with loading apple's javascript. Because apple does not provide mapkit as a module I need to load it via their url. It might be worth loading the mapkit JS yourself https://developer.apple.com/documentation/mapkitjs/loading_the_latest_or_a_specific_version_of_mapkit_js to see if that fixes the issue.