从React App中获取Mapjs.bundle.js的未型类型错误

发布于 2025-01-22 17:57:14 字数 2250 浏览 1 评论 0 原文

在这里的问候，开发人员的支持，

我在 mapjs.s.bundle.js 的浏览器控制台中看到了许多 untured typeerrors ，当我与React应用中的地图进行交互时。

我已经使用下面的最小应用复制了错误。任何洞察力都非常感谢。

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 ：（从develper.here.here.here.com上复制的react教程）

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}
      />
    )
  }
}

然后运行：

npm install && npm start

原文

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: