Я не могу исправить проблему Uncaught SyntaxError: невозможно использовать оператор импорта вне модуля

У меня есть "три" файла в одной папке 1. index.html 2. index.js 3. helper.js

Я хочу экспортировать код из helper.js и импортировать код в index.js (я уже связал index.js с index.html).

Мне понравился этот index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <button id="btn">click</button>


    <script src="./index.js"></script>
</body>
</html>

index.js

import btn from './helper'

btn.addEventListener('click', function () {
    window.alert('i am clicked')
})

и, наконец, helper.js

export let btn = document.getElementById('btn')

Затем я запускаю файл index.html в браузере Chrome.

Браузер Chrome показывает это сообщение в консоли.

Uncaught SyntaxError: нельзя использовать оператор импорта вне модуля

Подскажите, пожалуйста, как мне решить эту проблему. Я ищу в google и youtube, я сделал то же самое, что они показали. В результате браузер показывает это сообщение.


javascript ecmascript-6
person SA Noyon Ahmed    schedule 02.10.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вам нужно включить импорт внутри модуля:

Попробуй это:

<script type="module">
   import btn from './helper'
</script>

Ссылка: Модули ES в браузерах

person Guilherme Martin    schedule 02.10.2019
comment
Я попробовал type=module, но он показывает ошибку Доступ к сценарию в 'file:///D:/testing/index.js' из источника 'null' заблокирован политикой CORS: Запросы между источниками поддерживаются только для схем протоколов: http, data, chrome, chrome-extension, https. - person SA Noyon Ahmed; 02.10.2019
comment
Теперь другая ошибка. Вы пытаетесь получить доступ к скрипту без источника. Браузеры, такие как chrome, не позволяют вам получать доступ к файлам в локальной файловой системе с помощью JavaScript. Вам нужно установить веб-сервер, такой как LiveServer. - person Guilherme Martin; 02.10.2019
comment
я бы не стал так делать, что вы сказали. Я хочу решить это нормально без эффектов в index.html - person SA Noyon Ahmed; 02.10.2019
comment
stackoverflow.com/questions/8456538/ - person Guilherme Martin; 02.10.2019
comment
ваш ответ сбивает с толку - person SA Noyon Ahmed; 02.10.2019
comment
что они имели в виду под за пределами модуля? - person SA Noyon Ahmed; 02.10.2019

arrow_upward
0
arrow_downward

Вам нужно будет обслуживать свои файлы с помощью веб-сервера на каком-то порту, скажем, 5500. Затем укажите ваш браузер на этот порт, т.е. localhost: 5500/

Это будет единственный способ, которым браузер будет импортировать другие модули из другого js-файла.

См.... Документ MDN по модулям

  • Вы можете использовать http-сервер пакета npm.
  • Или расширение Live Server, если вы используете Visual Studio Code.
  • Или любой другой сервер, который вам нравится, который будет работать в вашей системе.

Далее вам нужно будет добавить type="module" к вашему тегу скрипта.

<button id="btn">click</button>


<script type="module" src="./index.js"></script>

И ваш index.js попробуйте это...

import { btn } from './helper.js'

Наконец, ваш helper.js ....

const btn = document.getElementById('btn');

export { btn };

Вы также можете подумать об использовании расширения .mjs для файлов js, которые являются модулями. Чтобы все знали, что это действительно модуль.

person Nick Sugar    schedule 02.10.2019
comment
наконец-то я решил свою проблему... моя проблема была в файле .babelrc... хорошо, спасибо - person SA Noyon Ahmed; 02.10.2019
comment
Хорошо :) В чем проблема с файлом .babelrc? Это может помочь другим отредактировать ваш исходный вопрос с вашим решением внизу. Удачного кодирования! - person Nick Sugar; 02.10.2019