'Getting Uncaught Type Error from mapjs.bundle.js in React app

Greetings HERE Developer Support,

I'm seeing numerous Uncaught TypeErrors in the browser console coming from mapjs.bundle.js as I interact with the map in my React app.

I've reproduced the error with the minimal app below. Any insight is much appreciated.

package.json:

{
    "type": "module",
    "scripts": {
        "start": "parcel index.html --open"
    },
    "devDependencies": {
        "parcel": "^2.4.1"
    },
    "dependencies": {
        "@here/maps-api-for-javascript": "^1.30.14",
        "react": "^18.0.0",
        "react-dom": "^18.0.0"
    }
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Map App</title>
</head>
<body>
    <div id="root" />
    <script src="index.jsx" type="module"></script>
</body>
</html>

index.jsx:

import React from 'react';

import { createRoot } from 'react-dom/client';

import Map from './Map';

const rootElem = document.getElementById("root");

createRoot(rootElem).render(<Map />);

Map.jsx: (copied from the React tutorial at developer.here.com)

import React from 'react';
import H from "@here/maps-api-for-javascript";

export default class Map extends React.Component {
  constructor(props) {
    super(props);
    // the reference to the container
    this.ref = React.createRef();
    // reference to the map
    this.map = null;
  }

  componentDidMount() {
    if (!this.map) {
      // instantiate a platform, default layers and a map as usual
      const platform = new H.service.Platform({
        apikey: MyApiKey
      });
      const layers = platform.createDefaultLayers();
      const map = new H.Map(
        this.ref.current,
        layers.vector.normal.map,
        {
          pixelRatio: window.devicePixelRatio,
          center: {lat: 0, lng: 0},
          zoom: 2,
        },
      );
      this.map = map;
    }
  }

  render() {
    return (
      <div
        style={{ width: '300px', height:'300px' }}
        ref={this.ref}
      />
    )
  }
}

Then run:

npm install && npm start

here-api

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Getting Uncaught Type Error from mapjs.bundle.js in React app

Sources

Related Questions