Почему не получается воспользоваться js модулем?

Question

[Nulltiton]

Пишу реализацию карты здания на flask + three.js. Обрисовал svg элементы в index.html:

<rect class="room" x="850" y="0" width="300" height="300" data-info="Кабинет 101" id="room-101" data-script="101.js"/>
...
                    <rect class="room" x="1200" y="0" width="300" height="300" data-info="Кабинет 104" id="room-104" data-script="102.js"/>

Написан js скрипт в index.html, который дергает файлы 101.js ... 104.js

<script>
        const tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

        d3.selectAll(".room, polygon")
            }).on("click", function(event, d) {
                const roomId = d3.select(this).attr("id");
                const scriptFile = d3.select(this).attr("data-script");

                // Удаляем предыдущий загруженный скрипт, если он существует
                const existingScript = document.getElementById('dynamic-script');
                if (existingScript) {
                    document.body.removeChild(existingScript);
                }

                if (roomId && scriptFile) {
                    document.querySelector('.main-content').style.display = 'none';
                    document.getElementById('scene-container').style.display = 'block';

                    const script = document.createElement('script');
                    script.id = 'dynamic-script'; // Присваиваем ID для удобного удаления
                    script.src = "/static/js/" + scriptFile; // Используем data-script для определения файла
                    document.body.appendChild(script);
                }
            });
    </script>

Проблема изначально заключалась в том, что при нажатии на любой svg срабатывал только 101.js, даже если после перегрузки нажимаю на другой svg. Каждый из этих файлов начинается с

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.module.js';

(раньше там был скаченный файл .min)
В консоли js увидел ошибку SyntaxError: Unexpected token '*'. import call expects one or two arguments.
Борюсь с этой проблемой уже неделю. На всякий случай структура этих файлов в проекте:
├── app.py
├── templates
│ └── index.html
└── static
└── js
└── 101.js
Подскажите, откуда может идти такая проблема? Вряд ли дело во flask, но то, что он показывает в js тоже не похоже на правду, так как все браузеры на которых я работал я обновил.

Answer 1

[black1277]

При использовании импортов тип скрипта должен быть указан как "module". Попробуйте так:

<script type="module"> // <-- =========  здесь =============
        const tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);
//=============
                    const script = document.createElement('script');
                    script.id = 'dynamic-script'; 
                    script.type = 'module';    //================= Добавляем этот атрибут================
                    script.src = "/static/js/" + scriptFile; 
                    document.body.appendChild(script);
//=============
</script>

Comments

[Nulltiton]

Большое спасибо за Ваш ответ, проблема с ошибкой решена. Хочу также уточнить, по какой причине может подгружаться только один скрипт? При нажатии на другие до сих пор выполняется только 101.js

[black1277]

Nulltiton, расставьте console.log() в разных местах и отследите какие значения получаете - увидите проблемное место. К примеру:

const roomId = d3.select(this).attr("id");
                const scriptFile = d3.select(this).attr("data-script");
                console.log('scriptFile', scriptFile)