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

Jose Sustaita 21 Reputation points

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: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?

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
608 questions
0 comments No comments
{count} votes

Accepted answer
  1. AshokPeddakotla-MSFT 28,316 Reputation points

    @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.

0 additional answers

Sort by: Most helpful