TypeError: Failed to resolve module specifier "azure-maps-control"

Question

In a previous question, I was trying to implement this Azure Maps Animations sample with TypeScript: https://samples.azuremaps.com/animations/animate-marker-along-path

Trying to merge 'azure-maps-control' and 'azure-maps-animations' under the atlas namespace while using the AMD mode in Tyepscript, I had issues as 'azure-maps-animations' is built for ESNext.

I redo my project but smaller, with:

 "compilerOptions": {
    "target": "ES2020", 
    "module": "ESNext",
    "moduleResolution": "node", 
    "esModuleInterop": true, 
    "strict": true, 
    "jsx": "preserve", 
    "sourceMap": true, 
    "declaration": false, 
    "lib": ["ES6", "DOM"], 
    "resolveJsonModule": true, 
    "downlevelIteration": true, 
    "outDir": "./js", 
    "rootDir": "./ts", 
    "skipLibCheck": true, 
    "forceConsistentCasingInFileNames": true, 
    "typeRoots": [
      "./node_modules/@types", 
      "./types"
    ],
    "baseUrl": "./",
    "paths": {
      "azure-maps-control": ["./node_modules/azure-maps-control/dist/atlas"]
    }
  },

the index.html file has:

/// <reference path="../types/azure-maps-control.d.ts" />

import * as atlas from "azure-maps-control";

function main() {

    try {
        console.log("main start !");
        //var map: atlas.Map = new atlas.Map("", {});
    } catch (error) {
        console.error('Error initializing game:', error);
    }
    console.log("main ends");
}

and index.html has:

<script type="module" src="./node_modules/azure-maps-control/dist/atlas.js" defer></script>
<script type="module" src="./js/main.js" defer></script>

As long as var map: atlas.Map = new atlas.Map("", {}); is commented out, web page loads in Chrome, the Network tab shows status of 200 of each files and files are in the Sources tab.

When I uncomment var map: atlas.Map = new atlas.Map("", {});, all files still have a status of 200 but main.js is not in Sources anymore and the message TypeError: Failed to resolve module specifier "azure-maps-control" rise.

The generated main.js file as import * as atlas from "azure-maps-control"; and I feel that javascript cannot find it.

I'm confused with all the different modes that can be used in Typescript and seems it changes everything dependending on the choice.

If you can see anything that could help me, thanks alot.

Edit : 2024 09 07

I commented out everything and started again adding bits by bits. I load only one JS in my index.html:

main.js :

/// <reference path="../types/azure-maps-control.d.ts" />
import * as atlas from 'azure-maps-control';
import 'azure-maps-control/dist/atlas.min.css';

VSCode doesn't complain but at runtime in Chrome I have about 'azure-maps-control': Failed to resolve module specifier "azure-maps-control". Relative references must start with either "/", "./", or "../".

I assumed it can be from settings in TSConfig.json, I'm using this as it seemed to be the most recent settings:

{
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ],
    "paths": {}
  }
  ,"include": ["ts/**/*", "types/**/*"]
  ,"exclude": ["node_modules", "**/*.spec.ts"]

Also, I am not using any bundler.

Any idea what I can do to fix this ?

Do you think it could work and if any one has any sample, to load atlas just in time ? Like in

  if(this.provider == "Azure") {
        const { atlas } = await import("a CDN or local file");
        map = new atlas.Map(...)
    }

Thanks

Naveen Sharma · Accepted Answer · 2024-09-03 13:44:47Z

The TypeError: Failed to resolve module specifier "azure-maps-control" error could be due to the configuration of module resolution in your TypeScript setup.

You need to call like this azure-maps-control module in your tscode as follows. I used this link to integrate the Azure Maps control:

import * as atlas from 'azure-maps-control';
import 'azure-maps-control/dist/atlas.min.css';

function main() {
    try {
        console.log("main start !");
  
        const map = new atlas.Map("map", {
            view: 'Auto',
            authOptions: {
                authType: 'subscriptionKey',
                subscriptionKey: '<Your Azure Maps Key>'
            }
        });
    } catch (error) {
        console.error('Error initializing map:', error);
    }
    console.log("main ends");
}

document.body.onload = main;

The below React app code is to integrate Azure Maps using the azure-maps-control library.Thank @yulinscottkang for the code :


import React from "react";
import {
  AzureMap,
  AzureMapsProvider,
  IAzureMapControls,
  IAzureMapOptions,
} from "react-azure-maps";
import { AuthenticationType, ControlOptions } from "azure-maps-control";
import 'azure-maps-control/dist/atlas.min.css';

const option: IAzureMapOptions = {
  authOptions: {
    authType: AuthenticationType.subscriptionKey,
    subscriptionKey: "<Your Azure Maps Key>", 
  },
};

const controls: IAzureMapControls[] = [
  {
    controlName: "StyleControl",
    controlOptions: { mapStyles: "all" },
    options: { position: "top-right" } as ControlOptions,
  },
  {
    controlName: "ZoomControl",
    options: { position: "top-right" } as ControlOptions,
  },
  {
    controlName: "CompassControl",
    controlOptions: { rotationDegreesDelta: 10, style: "dark" },
    options: { position: "bottom-right" } as ControlOptions,
  },
  {
    controlName: "PitchControl",
    controlOptions: { pitchDegreesDelta: 5, style: "dark" },
    options: { position: "bottom-right" } as ControlOptions,
  },
  {
    controlName: "TrafficControl",
    controlOptions: { incidents: true },
    options: { position: "top-left" } as ControlOptions,
  },
  {
    controlName: "TrafficLegendControl",
    controlOptions: {},
    options: { position: "bottom-left" } as ControlOptions,
  },
];

const Map: React.FC = () => {
  return (
    <AzureMapsProvider>
      <div style={{ height: "600px", width: "100%" }}>
        <AzureMap options={option} controls={controls} />
      </div>
    </AzureMapsProvider>
  );
};

export default Map;

enter image description here

Refer to this GitHub repository to see how to use azure-maps-control with azure-maps-animations.

Thank you for your help. I will edit my question to explain what I started and where I get stuck, thanks again

Collectives™ on Stack Overflow

TypeError: Failed to resolve module specifier "azure-maps-control"

Edit : 2024 09 07

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit : 2024 09 07

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related