Error importing troika-three-text with importmap

I’m trying to get the troika-three-text into my Three.js script by importing it via the html, as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js OrbitControls Example (r168)</title>
</head>
<body>
    <!-- Set canvas size with width and height attributes -->
    <canvas id="__canvas_id__" width="600" height="400"></canvas>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/[email protected]/build/three.module.js",
                "OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
                "troika-three-text": "https://unpkg.com/[email protected]/dist/troika-three-text.esm.js"
            }
        }
    </script>
    <script type="module" src="4viz3d.js"></script>
</body>
</html>

Yet, when I try to import the package into my 4viz3d.js script using import { Text } from 'troika-three-text'; I get an error and no image is shown anymore.

Any ideas on what might be going wrong?