Type error when importing 'azure-maps-control' and building with Nextjs

Question

I'm trying to build a component that utilizes Azure maps. I am use Nextjs for this. I have it imported as such:

import * as atlas from 'azure-maps-control'

When I run the next build I get this error:

info - Collecting page data ..TypeError: Cannot read property 'createElement' of undefined
at Object.resolveURL (/maptest/node_modules/azure-maps-control/dist/atlas.min.js:55:6599)
at t.setRTLTextPlugin (/maptest/node_modules/azure-maps-control/dist/atlas.min.js:55:349036)
at/maptest/node_modules/azure-maps-control/dist/atlas.min.js:55:1234519
at /maptest/node_modules/azure-maps-control/dist/atlas.min.js:55:69
at Object.<anonymous> (/maptest/node_modules/azure-maps-control/dist/atlas.min.js:55:173)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)

Has anyone found a solution to this or a workaround?

Answer 1

@Jose Sustaita Welcome to Microsoft Q&A forum!

Apologies for the delay in response. Are you following any documentation for the steps?

The error occurs because the library requires Web APIs to work, which are not available when Next.js pre-renders the page on the server-side.

This can be resolved by dynamically importing the component with ssr: false which was using azure-maps-control.

Please check the Stack Overflow issue for more details and let us know if that helps.

Feel free to respond/comment on this post for further assistance.