Почему мой JavaScript-файл не выполняется, когда я указываю тип 'module' в теге <script>?

Оффтоп javascript
1

Привет всем! У меня возникла проблема с подключением JavaScript-файла как модуля. Когда я добавляю атрибут type="module" в тег <script>, код перестает работать. Без этого атрибута все функционирует нормально.

Вот мой HTML-файл:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script type="module" src="main.js"></script>
</body>
</html>

А вот содержимое main.js:

console.log("Запуск прошел успешно");

Когда я убираю type="module", в консоли появляется сообщение. Но с ним - ничего не происходит.

Я использую Visual Studio Code. Может, нужно что-то настроить в JSON-файле? Или дело в расширениях? На repl.it код работает нормально, так что, вероятно, проблема не в синтаксисе.

Буду благодарен за любую помощь или подсказку, в каком направлении искать решение!

2

Это классическая ловушка с модулями. Браузер не грузит модули с file://, только с http(s)://. Запусти простой сервер, например через расширение Live Server в VS Code или через npm-пакет http-server. Ещё вариант - поднять локальный Python-сервер командой python -m http.server. После этого всё должно заработать. И да, не забудь добавить ‘defer’ к скрипту, чтобы он грузился после DOM.

3

Тут дело в CORS-политике браузеров. Модули не грузятся с file:// из-за безопасности. Попробуй запустить простой сервер. В VS Code есть Live Server, или через терминал python -m http.server. Так точно заработает. И еще совет - добавь ‘defer’ к скрипту, чтобы он загружался после DOM. Удачи с отладкой!