HERE API: __webpack_require__ is not defined in React App

Question

I have a problem when implementing the HERE Maps API into my React App.

I have installed and imported the following package: import H from '@here/maps-api-for-javascript';

However, for some reason I am unable to display the map because "webpack_require_ is not defined".

I also tried following this but for some reasonaeven after the steps there is still something I am missing. https://developer.here.com/documentation/maps/3.1.42.2/dev_guide/topics/react-practices.html

node: { global: false } in my webpack config, is undefined and cannot be located.

What am I doing wrong? I have been trying to debug this issue for a while now. Can't seem to find the secret sauce to remove the errors. Right now, all I want to do is display a working map. Thanks for your help.

import React, { useEffect, useRef } from 'react';
import H from '@here/maps-api-for-javascript';

const Map = ( props ) => {
  const mapRef = useRef(null);
  const map = useRef(null);
  const platform = useRef(null)
  const { apikey } = props;
 
  useEffect(
    () => {
      // Check if the map object has already been created
      if (!map.current) {
        // Create a platform object with the API key
        platform.current = new H.service.Platform({ apikey });
        // Create a new Raster Tile service instance
        const rasterTileService = platform.current.getRasterTileService({
          queryParams: {
            style: "explore.day",
            size: 512,
          },
        });
        // Creates a new instance of the H.service.rasterTile.Provider class
        // The class provides raster tiles for a given tile layer ID and pixel format
        const rasterTileProvider = new H.service.rasterTile.Provider(
          rasterTileService
        );
        // Create a new Tile layer with the Raster Tile provider
        const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
        // Create a new map instance with the Tile layer, center and zoom level
        const newMap = new H.Map(mapRef.current, rasterTileLayer, {
          pixelRatio: window.devicePixelRatio,
          center: {
            lat: 64.144,
            lng: -21.94,
          },
          zoom: 14,
        });
 
        // Add panning and zooming behavior to the map
        const behavior = new H.mapevents.Behavior(
          new H.mapevents.MapEvents(newMap)
        );
 
        // Set the map object to the reference
        map.current = newMap;
      }
    },
    // Dependencies array
    [apikey]
  );
 
  // Return a div element to hold the map
  return <div style={ { width: "100%", height: "350px" } } ref={mapRef} />;
}

 
  export default Map;

Answer 1

You need to put node: { global: false } in the return {...} of the module.exports = function (webpackEnv) {...} function. So at the end of the webpack.config file, it should be looked like as follows:

    // // correct place
    // node: {
    //   global: false
    // }
  };

  // incorrect place
  node: {
    global: false
  }
};