Error Loading Azure Maps

Question

Error Loading Azure Maps

Elythorix 40

While developing a WebApp using Next.js, I encountered an issue integrating Azure Maps. While running the app with npm run dev, the Azure Maps functionality works correctly. However, running with npm run start after build, the map fails to load and the following error keeps occurring. I'm not sure about the cause. Can somebody please help? Thank you!

2dfcbe770-88d1-4c72-8cf3-9110d3e1007f:1 Uncaught ReferenceError: Cannot access 'Q' before initialization
    at vc (dfcbe770-88d1-4c72-8cf3-9110d3e1007f:1:239772)
    at e.performSymbolLayout (dfcbe770-88d1-4c72-8cf3-9110d3e1007f:1:311743)
    at n.T (dfcbe770-88d1-4c72-8cf3-9110d3e1007f:1:324533)
    at dfcbe770-88d1-4c72-8cf3-9110d3e1007f:1:325420
    at e.Actor.processTask (dfcbe770-88d1-4c72-8cf3-9110d3e1007f:1:293141)
    at Qc.process [as _callback] (dfcbe770-88d1-4c72-8cf3-9110d3e1007f:1:292367)
    at Qc.MessageChannel._channel.port2.onmessage (dfcbe770-88d1-4c72-8cf3-9110d3e1007f:1:268004)

Also, while the map does work when running with dev, I noticed the following warning when using the map:

f1c48ed2-da22-4921-8c5b-48380159b663:1 Expected value to be of type number, but found null instead.

evaluate @ f1c48ed2-da22-4921-8c5b-48380159b663:1

evaluate @ f1c48ed2-da22-4921-8c5b-48380159b663:2

ue.performSymbolLayout @ f1c48ed2-da22-4921-8c5b-48380159b663:2

b @ f1c48ed2-da22-4921-8c5b-48380159b663:2

(anonymous) @ f1c48ed2-da22-4921-8c5b-48380159b663:2

processTask @ f1c48ed2-da22-4921-8c5b-48380159b663:2

process @ f1c48ed2-da22-4921-8c5b-48380159b663:2

Ql.MessageChannel._channel.port2.onmessage @ f1c48ed2-da22-4921-8c5b-48380159b663:2

Edit: I think the issue may be due to Next.js using server-side routing. Even though I enabled dynamic routing with ssr set to false, and tried the below answer, I couldn't get the map to load during build. Switching back to react.js seemed to fix it.

AshokPeddakotla-MSFT 36,021 Reputation points Moderator

2023-11-30T15:55:17.29+00:00

Ephirian Just checking to see if you had a chance to review the below response.

Do let us know if that helps or have any other queries.

If the response helped, please do click Accept Answer and Yes for was this answer helpful.

Doing so would help other community members with similar issue identify the solution. I highly appreciate your contribution to the community.

Answer accepted by question author

AshokPeddakotla-MSFT 36,021 Moderator

Ephirian Greetings!

I'm glad that your issue is resolved and thank you for posting your solution so that others experiencing the same thing can easily reference this!

Since the Microsoft Q&A community has a policy that the question author cannot accept their own answer, they can only accept answers by others, I'll repost your solution in case you'd like to Accept the answer.

Error Message:

While developing a WebApp using Next.js, I encountered an issue integrating Azure Maps. While running the app with npm run dev, the Azure Maps functionality works correctly. However, running with npm run start after build, the map fails to load and the following error keeps occurring. I'm not sure about the cause.

2dfcbe770-88d1-4c72-8cf3-9110d3e1007f:1 Uncaught ReferenceError: Cannot access 'Q' before initialization

Solution:

Issue may be due to Next.js using server-side routing. Even though I enabled dynamic routing with ssr set to false, and tried the below answer, I couldn't get the map to load during build. Switching back to react.js seemed to fix it.

If you have any other questions, please let me know. Thank you again for your time and patience throughout this issue.

0 comments

1 additional answer

Your answer

AshokPeddakotla-MSFT 36,021 Reputation points Moderator

2023-11-30T15:55:17.29+00:00

Ephirian Just checking to see if you had a chance to review the below response.

Do let us know if that helps or have any other queries.

If the response helped, please do click Accept Answer and Yes for was this answer helpful.

Doing so would help other community members with similar issue identify the solution. I highly appreciate your contribution to the community.

Answer 1

Not sure on the main issue here, never seen that before. As for the error "Expected value to be of type number, but found null instead." I suspect this is related to a style expression in your app. If you use ['get', 'someProperty'] and the expression expects a number, but one of your data points doesn't have that property set, it will get null. What you can do is wrap this with case and has expressions. For example:

[ 'case', 
	//Check to see if the shape has the property.
	['has', 'someProperty'],

	//The shape has the property. Add your custom expression below. (keeping it simple for example)
	['get', 'someProperty'],

	//The shape either doesn't have the property, return a default value.
	0
]