Модуль импорта JavaScript в index.html не работает из-за ошибок

Я пытаюсь импортировать модуль в свой файл index.html.

Вот код:

// Index.html:

<!doctype html>

<html lang = "en">
<head>
  <meta charset = "utf-8">

  <title></title>

</head>

<body>

<div></div>

  <script type = "module" src = "module.js"></script>
  <script type = "text/javascript">

    import { addTextToBody } from 'module.js';

    addTextToBody('some text here');

  </script>
</body>
</html>

И js:

export function addTextToBody(text) {

  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);

}

Я получаю следующие ошибки:

Uncaught SyntaxError: Неожиданный токен {- Строка 18

Доступ к скрипту в 'module.js' из источника 'null' был заблокирован политикой CORS: недопустимый ответ. Следовательно, к источнику 'null' доступ не разрешен.

Как я могу это исправить?

Используйте <script type = "module"> даже для встроенного скрипта

— 15.09.2018 11:48

javascript ecmascript-6

15.09.2018 11:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

3 996

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пытаться:

import { addTextToBody } from './module.js';

Где находится модуль по отношению к index.html?

— 15.09.2018 11:29

Оба файла находятся в одной папке. Я корень папки на том же уровне

— 15.09.2018 11:31

15.09.2018 11:24

Ответ принят как подходящий

module.js должен быть ./module.js
Вам не нужно импортировать модуль в начале страницы (но вы можете).
Использование import требует, чтобы сценарий был типа module, а не только импортированный сценарий.
Вы должны поместить импорт модулей в <head> (в самом начале).

Следующий пример работает (я вырезал ненужные части):

<!-- index.html -->
<meta charset = "utf-8">

<script type = "module">
  import { addTextToBody } from './module.js';

  addTextToBody('some text here');
</script>

// module.js
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

Приведенный выше код будет работать с Firefox, но не с Chrome. Похоже, вы используете Chrome (я предполагаю, что из вашего сообщения об ошибке). Chrome строго запрещает доступ к ресурсам по протоколу file://. Есть несколько решений: