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.

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

please remove API keys from screenshots
–edit–
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.

2 Likes