NextJS ReferenceError: self is not defined

Maps SDK for Web (JavaScript)
#1

Hi everyone,

I keep getting error every time I refresh the page that renders the map. I’m using the “@tomtom-international/web-sdk-maps” and “@tomtom-international/web-sdk-services” libraries for this NextJS project.

Error:
Uncaught ReferenceError: self is not defined
at Object. (file:///Users/leoasadourian/Documents/node_apps/property-rentals/node_modules/@tomtom-international/web-sdk-maps/dist/maps.min.js:1:224)

My Code:
import React, { useEffect, useState, useRef } from ‘react’;
import * as tt from ‘@tomtom-international/web-sdk-maps’;
import ttt from ‘@tomtom-international/web-sdk-services’;

const mapElement = useRef();
const [mapLongitude, setMapLongitude] = useState(0);
const [mapLatitude, setMapLatitude] = useState(0);

Screen Shot 2022-12-04 at 2.36.36 PM
Screen Shot 2022-12-04 at 2.36.36 PM597×881 72.9 KB

#2

please remove API keys from screenshots
–edit–
I removed API keys from the screenshot

1 Like
#3

Thank you Przemek Malolepszy, I didn’t notice the API key.

#4

I Fixed the error by moving the import to my component’s useEffect , then dynamically import the library and added the logic there.

2 Likes
#5

Hey @leoasa84 can you please show the solution code ?? I am having the same problem…
Thanks !!

#6

example:

useEffect(() => {
    const initTT = async () => {
      const tt = await import('@tomtom-international/web-sdk-maps');
      let map = tt.map({
        key: 'apikey',
        container: mapElement.current,
        center: [mapLongitude, mapLatitude],
        zoom: mapZoom,
      });
      setMap(map);
    };
    initTT();

    return () => map.remove();
  }, []);