NextJS ReferenceError: self is not defined

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.

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);

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

1 Like

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

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


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


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

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