Description
Simply following the starter code and getting the following errors:
`react-azure-maps.es5.js:55
Error: An invalid authentication type was specified.
at react-azure-maps.es5.js:55:1
at new Promise (<anonymous>)
at Rf.initialize (react-azure-maps.es5.js:55:1)
at new tg (react-azure-maps.es5.js:55:1)
at react-azure-maps.es5.js:55:1
at commitHookEffectListMount (react-dom.development.js:23150:1)
at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
at commitPassiveMountEffects (react-dom.development.js:24866:1)
qf._invokeListeners @ react-azure-maps.es5.js:55
qf.invoke @ react-azure-maps.es5.js:55
(anonymous) @ react-azure-maps.es5.js:55
Promise.catch (async)
tg @ react-azure-maps.es5.js:55
(anonymous) @ react-azure-maps.es5.js:55
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
performSyncWorkOnRoot @ react-dom.development.js:26076
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-azure-maps.es5.js:55
Error: An invalid authentication type was specified.
at react-azure-maps.es5.js:55:1
at new Promise (<anonymous>)
at Rf.initialize (react-azure-maps.es5.js:55:1)
at new tg (react-azure-maps.es5.js:55:1)
at react-azure-maps.es5.js:55:1
at commitHookEffectListMount (react-dom.development.js:23150:1)
at invokePassiveEffectMountInDEV (react-dom.development.js:25154:1)
at invokeEffectsInDev (react-dom.development.js:27351:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27330:1)
at flushPassiveEffectsImpl (react-dom.development.js:27056:1)
qf._invokeListeners @ react-azure-maps.es5.js:55
qf.invoke @ react-azure-maps.es5.js:55
(anonymous) @ react-azure-maps.es5.js:55
Promise.catch (async)
tg @ react-azure-maps.es5.js:55
(anonymous) @ react-azure-maps.es5.js:55
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
performSyncWorkOnRoot @ react-dom.development.js:26076
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533`
Code I am using is pretty straight forward and simple...
`import React, { useState } from "react";
import {
AzureMap,
AzureMapsProvider,
IAzureMapOptions,
} from "react-azure-maps";
import { AuthenticationType } from "azure-maps-control";
function HomePage() {
const { option } = {
authOptions: {
authType: AuthenticationType.subscriptionKey,
subscriptionKey: "MYSUBSCRIPTIONKEY", // Your subscription key
},
};
return (
Welcome to Home Page
<div style={{ height: "300px" }}>
);
}
export default HomePage;`