Undefined is not an object (evaluating 'tt.map')

Maps SDK for Web (JavaScript)
#1

This is for a Vue3 app.

I am importing the web-sdk-maps package via npm and using webpack to import the script and css into the page as follows:

import tt from ‘@tomtom-international/web-sdk-maps’

@import ‘@tomtom-international/web-sdk-maps/dist/maps.css’;

I have verified that both the script and css files exist when the page renders. I have a div defined in the template as follows:

...

The script section contains the following:

import { onMounted, ref } from ‘vue’

export default {
name: ‘Map’,

setup() {
    const mapRef = ref(null)

    onMounted(() => {
        const tt = window.services
        var map = tt.map({
            key: '<my key>',
            container: mapRef.value,
            style: 'tomtom://vector/1/basic-main'
        })
        map.addControl(new tt.FullscreenControl())
        map.addControl(new tt.NavigationControl())
    })

    return {
        mapRef
    }
}

When the page renders I get the following in the console:

TypeError: undefined is not an object (evaluating ‘tt.map’)

I really want to move away from using Google Maps, but I can’t seem to get past this error. I’ve tried importing default as tt and {tt} and even importing {map, LngLat} but they all end up with this same error. Any help is much appreciated.

#2

I was able to view a map with this code:

<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		<div id="map"></div>
	</div>
</template>

<script>
import tt from '@tomtom-international/web-sdk-maps'
import { onMounted, ref } from 'vue'

export default {
	name: 'Map',

	setup() {
		const mapRef = ref(null)

		onMounted(() => {
			
			var map = tt.map({
				key: 'mykey',
				container: 'map'
			})
			map.addControl(new tt.FullscreenControl())
			map.addControl(new tt.NavigationControl())
		})

		return {
			mapRef
		}
	}
}
</script>

tt from @tomtom-international/web-sdk-maps gives map object, while tt from @tomtom-international/web-sdk-services gives services object, like search or routing.