Модуль импорта Javascript в index.html не работает из-за ошибок - PullRequest
Новая
       3

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

0 голосов
/ 15 сентября 2018

Я пытаюсь импортировать модуль в мой файл 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', следовательно, не имеет доступа.

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

Ответы [ 2 ]

0 голосов
/ 15 сентября 2018
  1. module.js должно быть ./module.js
  2. Вам не нужно импортировать модуль в начале страницы (но вы можете это сделать).
  3. Использование import требует, чтобы скрипт имел тип module, а не только импортированный скрипт.
  4. Вы должны поместить импорт модулей в <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://.Есть несколько решений:

  1. Разместите ваш код на веб-сервере (например, nginx ).
  2. Используйте другой браузер (например, Firefox * 1029)*).
  3. Отключить веб-безопасность в целом, см. этот ответ .
0 голосов
/ 15 сентября 2018

Попробуйте: 

import { addTextToBody } from './module.js';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...