@here/maps-api-for-javascript not working next js

Question

I am trying to figure out why @here/maps-api-for-javascript is not working in next js and throwing the below error:

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

export default H;
^^^^^^

SyntaxError: Unexpected token 'export'

Answer 1

Please try the below snippet and refer to the following guide for more details: https://developer.here.com/documentation/maps/3.1.29.0/dev_guide/topics/react-practices.html

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: '{YOUR_API_KEY}' 

      }); 

      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} 

      /> 

    ) 

  } 

} 

Answer 2

The way to resolve this issue is with a Dynamic Import<\/a> with no SSR. If you follow the Using React<\/a> guide provided by HERE, you will need to import the Map component as follows:

import dynamic from "next/dynamic";

function App() {
  const Map = dynamic(() => import("./Map"), {
    ssr: false
  });
  return (
    <div>
      <Map />
    </div>
  );
}

export default App;