В этом кратком руководстве мы рассмотрим, как можно решить очень распространенную ошибку «Uncaught SyntaxError: Cannot use import statement outside a module». Эта ошибка возникает, когда мы пытаемся использовать import внутри проекта, который не настроен для модулей — поэтому давайте рассмотрим, как ее можно решить.
Устранение ошибки оператора import вне модуля
Эта ошибка возникает потому, что для использования оператора import мы должны явно указать Javascript, что данный файл является модулем. Например, если вы используете строку ниже и не указали Javascript, что файл является модулем, он выдаст ошибку:
import fs from 'fs'
В зависимости от того, где вы получаете ошибку, существует несколько различных способов ее устранения.
Разрешение ошибки импорта модуля в Node.js
Если вы используете Node.js, эту ошибку можно решить двумя способами. Первый — это обновить ваш package.json, чтобы сообщить Node.js, что весь проект является модулем. Откройте ваш package.json и на верхнем уровне добавьте "type": "module". Например, мой package.json будет выглядеть следующим образом:
{
// ... other package.json stuff
"type": "module"
// ... other package.json stuff
}
Это сразу же решит проблему. Однако в некоторых крайних случаях вы можете обнаружить, что у вас есть проблемы с этим, и другие части вашего кода могут начать выдавать ошибки. Если вы хотите, чтобы только один файл в вашем проекте поддерживал import, то измените расширение файла на .mjs. Например, если ваш import находился в index.js, переименуйте index.js в index.mjs. Теперь ваша проблема будет решена.
Устранение ошибки импорта модуля в тегах сценария
Второе место, где может возникнуть эта ошибка, — тег скрипта, как, например, здесь:
<script src="mymodule.js"></script>
В этом случае, если mymodule.js содержит оператор import, он не будет работать. Чтобы решить эту проблему, добавьте type="module" в тег script:
<script type="module" src="mymodule.js"></script>
Теперь у вас больше никогда не будет проблем с import.