AzureMapPopup Error: TypeError: Cannot read properties of undefined (reading 'getCurrentStack')

[1ky0ng]

I created a react control which displays an azure map, its working fine displaying only just the map and pins. But if I included a popup for the details of my pins the error occurred. Here is my code.

` import * as React from 'react'; import { useState, useEffect } from 'react'; import { IInputs } from '../generated/ManifestTypes'; import { Stack } from '@fluentui/react/lib/Stack'; import { AzureMap, AzureMapsProvider, IAzureMapOptions, AzureMapDataSourceProvider, AzureMapLayerProvider, AzureMapFeature, AzureMapPopup } from 'react-azure-maps'; import { AuthenticationType, data, MapMouseEvent} from 'azure-maps-control'; import 'azure-maps-control/dist/atlas.min.css';

        export interface AzureMapsGridProp {
        mapContext: ComponentFramework.Context;
        items?: any[];
        }

        const baseMapOptions: IAzureMapOptions = {
        zoom: 10,
        center: [0, 0],
        language: 'en-US',
        view: 'Auto',
        }

        const renderPoint = (): data.Position => {
        const randomLongitude = Math.floor(Math.random() * (-80 - -120) + -120);
        const randomLatitude = Math.floor(Math.random() * (30 - 65) + 65);
        return new data.Position(randomLongitude, randomLatitude);
        };

        export const AzureMapsGrid: React.FunctionComponent = (props) => {
        const contextWebApi: any = props.mapContext.webAPI;
        const [azureMapOptions, setAzureMapOptions] = useState(baseMapOptions);
        const [showMap, setShowMap] = useState(false);
        const [coords1, setCoords1] = useState<data.Position>(renderPoint);
        const [isVisible, setIsVisible] = useState(false);

        //Checking if Azure Map control is supported on user's browser
        useEffect(() => {
            CreateAzureMapToken(props.mapContext);
        },[]);

        useEffect(() => {
            if (azureMapOptions.authOptions){
                setShowMap(true);
            }
        }, [azureMapOptions.authOptions]);

        //Custom API Call for Creating Azure Map Token
        const CreateAzureMapToken = async(context:  ComponentFramework.Context<IInputs>) => {

            //initialize Create Azure Maps Token Request
            let createAzureMapsToken_Request = {    
                getMetadata: function () {
                    return {
                        boundParameter: null,
                        parameterTypes: {},
                        operationType: 0, operationName: "<generate token custom api name here>"
                    };
                }
            };

        contextWebApi.execute(createAzureMapsToken_Request).then(
            function success(response: any) {
                if (response.ok) { return response.json(); }
            }
        ).then(function (responseBody: any) {

            let result = responseBody;
            let token = result["Token"]; // Edm.String
            let xMSClientId = result["X-MS-CLIENT-ID"]; // Edm.String

            UpdateAzureMapOptions(xMSClientId, token);
        }).catch(function (error: any) {
            console.log(error.message);

            context.navigation.openErrorDialog({
            errorCode: error.errorCode,
            details: error.message,
            message: error.raw
            });
        });
        }

        const UpdateAzureMapOptions = async(ClientId: string, bearerToken: string) => {

        let updatedOptions = {
        ...azureMapOptions, 
        authOptions: {
            authType: AuthenticationType.anonymous,
            clientId: ClientId,
            getToken: async (resolve: any, reject: any) => {
                resolve(bearerToken);
            }
        }
        }

        setAzureMapOptions(updatedOptions);
        }

        return(
        <Stack id='azureMapContainer' styles={{root: {height: '500px', position: 'relative'}}}>
            {showMap && <AzureMapsProvider>
                <AzureMap 
                    options={azureMapOptions}>
                    <AzureMapDataSourceProvider id={'DataSource Provider'}>
                        <AzureMapLayerProvider
                            id={"Layer1"}
                            options={{
                                iconOptions: {
                                    image: 'marker-blue',
                                }
                            }}
                            type={"SymbolLayer"}
                            events={{
                                click: (e: MapMouseEvent) => {
                                    if (e.shapes && e.shapes.length > 0) {
                                        setIsVisible(true);
                                    }
                                }
                            }}/>
                            <AzureMapFeature
                                key={'Pin1'}
                                id={'Pin1'}
                                type="Point"
                                coordinate={coords1}
                                properties={{
                                    title: 'Pin',
                                    icon: 'marker-blue',
                                }}
                            />
                    </AzureMapDataSourceProvider>
                    <AzureMapPopup
                        isVisible={isVisible}
                        options={{ closeButton: true,
                            position: [0, 0],
                            pixelOffset: [0, -5],           
                            showPointer: true}}
                        popupContent={<div>Hello World</div>}
                    />
                </AzureMap>
            </AzureMapsProvider>}
        </Stack>
        );
        }

`

Here is the details of the error: ErrorDetails.txt

[yulinscottkang]

In AzureMapPopup, we use renderToStaticMarkup from react-dom/server to create the popup content. The error occurs within react-dom/server, trying to access ReactDebugCurrentFrame.getCurrentStack, but ReactDebugCurrentFrame is undefined.

I'd start by checking why ReactDebugCurrentFrame is undefined in your development environment. Ensure you’re using the same versions of react and react-dom in your package.json.

As an alternative, you can also try a custom popup implementation that doesn't rely on renderToStaticMarkup. See https://github.com/Azure/react-azure-maps/issues/182#issuecomment-1824522953 for more details.

[1ky0ng]

@yulinscottkang, thank for the reply.

I added the GeoMapPopup file, referenced on my code above then use it in replacement for AzureMapPopup. It still has an error but it's a new one.

TypeError: Cannot create property '_updatedFibers' on number '0'

[yulinscottkang]

@1ky0ng, Which versions of react and react-dom are you using?

[1ky0ng]

@yulinscottkang

"react": "^18.3.1", "react-dom": "^18.3.1"

Here is a screenshot of my package.json

[yulinscottkang]

I see react is listed in the devDependencies of your project. Try moving it to dependencies along with react-dom.

[1ky0ng]

@yulinscottkang
Already did, but still giving me the same issue.