Исправить Невозможно использовать оператор импорта за пределами модуля. Проблема
Я пытался загрузить некоторые JS-файлы и столкнулся с этой странной ошибкой «Невозможно использовать оператор импорта вне модуля» и не смог продолжить кодирование. Проведя небольшое исследование, я нашел несколько решений для устранения проблемы. Я надеюсь, что это поможет вам исправить ошибку Cannot use import за пределами узла модуля.
Самое простое решение для проблемы
Статический import Оператор используется для импорта привязок, которые экспортируются другим модулем.
Импортированные модули находятся в strict mode объявляете ли вы их таковыми или нет.
Другие решения
Существует много причин, по которым вышеупомянутая проблема может возникнуть. Например, вы можете найти файл в src каталог вместо встроенного файла в dist каталог.
Другая проблема может быть в том, что вы загружаете файл, который использует es6 с нормальным js файлы, вы должны сначала скомпилировать es6 а затем загрузите файлы, чтобы исправить проблему
Я получил эту ошибку, потому что я забыл type = ”module” внутри тега скрипта, поэтому вот как я исправил проблему:
Я просто добавил type = ”module” с тегом script, и проблема была решена.
Еще одно решение
Ошибка может возникнуть, если файл, на который вы ссылаетесь в своем HTML-файле, является несвязанной версией файла. Чтобы получить полную версию в комплекте, вам необходимо установить ее с помощью npm :
Когда вы запустите указанную выше команду, она сохранит пакет в каталоге node_modules, а затем вы можете связать файл по адресу node_modules/package_to_save/dist/file.js
Окончательное решение 2020 Обновление
Убедитесь, что у вас установлена последняя версия Node.
Просто воспользуйтесь любой из следующих опций, чтобы решить проблему:
Узнайте об импорте в Javascript здесь для лучшего понимания импорта файлов. Понимание импорта и экспорта файлов поможет вам оптимизировать оператор Cannot use import вне модуля в nodejs.
«Uncaught SyntaxError: Cannot use import statement outside a module» when importing ECMAScript 6
I’m using ArcGIS JSAPI 4.12 and wish to use Spatial Illusions to draw military symbols on a map.
When I add milsymbol.js to the script, the console returns error
Uncaught SyntaxError: Cannot use import statement outside a module`
so I add type=»module» to the script, and then it returns
Uncaught ReferenceError: ms is not defined
So, whether I add type=»module» or not, there are always errors. However, in the official document of Spatial Illusions, there isn’t any type=»module» in the script. I’m now really confused. How do they manage to get it work without adding the type?
File milsymbol.js
26 Answers 26
I got this error because I forgot the type=»module» inside the script tag:
It looks like the cause of the errors are:
The reason you’re getting the Uncaught ReferenceError: ms is not defined error is because modules are scoped, and since you’re loading the library using native modules, ms is not in the global scope and is therefore not accessible in the following script tag.
Update For Node.js / NPM
I was also facing the same issue until I added the type=»module» to the script.
Before it was like this
And after changing it to
It worked perfectly.
I solved this issue by doing the following:
Edit: This was written when node12 was the latest LTS, this does not apply to node 14 LTS.
I resolved my case by replacing «import» by «require».
I don’t know whether this has appeared obvious here. I would like to point out that as far as client-side (browser) JavaScript is concerned, you can add type=»module» to both external as well as internal js scripts.
Say, you have a file ‘module.js’:
You can use it in an external script, in which you do the import, eg.:
You can also use it in an internal script, eg.:
It is worthwhile mentioning that for relative paths, you must not omit the «./» characters, ie.:
I got this error in React and fixed it with the following steps:
Go to the project root directory, and open the Package.json file for editing.
Save it and restart the server.
If you want to use import instead of require() for modules, change or add the value of type to module in package.json file
I’m coding on vanilla JavaScript. If you’re doing same, simply add a type=»module» to your script tag.
That is, previous code:
For me this helped:
Why this occurs and more possible causes:
A lot of interfaces still do not understand ES6 JavaScript syntax/features. Hence there is need for ES6 to be compiled to ES5 whenever it is used in any file or project.
The possible reasons for the SyntaxError: Cannot use import statement outside a module error is you are trying to run the file independently. You are yet to install and set up an ES6 compiler such as Babel or the path of the file in your runscript is wrong/not the compiled file.
I couldn’t get rid of this SyntaxError: Cannot use import statement outside a module error no matter what I have tried and it got so frustrating. Is there anybody out here solved this issue? I have read a million stackoverflow and github issue threads. No clear solutions.
This is a React, Typescript, Webpack project. I am trying to test a module. But Jest won’t transform the module to plain javascript somehow.
The error I get is
What I have tried to solve this (and didn’t work):
Using env setup in babel.config : env.test.preset: [‘@babel/plugin-transform-modules-commonjs’]
modifying transform setup in Jest configuration as ‘^.+\\.jsx?$’: ‘babel-jest’, ‘^.+\\.tsx?$’: ‘ts-jest’ and all other possibilities around this.
I have this setup:
package.json
.babelrc.js
variables.ts
variables.spec.ts
Any idea on how to resolve this problem?
6 Answers 6
Even though I have tried them separately, I haven’t tried them together ( transform and transformIgnorePatterns ). So this jest configuration solved my issue:
My mistakes were:
Since jest is not working with esmodules well, you need to add these configurations in jest.config.js to tell Jest to use commonJS builds instead
I got stuck in the same situation. Due to I had a private untranspiled package which is based on TypeScript, and all my source files and test files were all applied with ECMA ( import syntax ), I encountered the following error as well.
SyntaxError: Cannot use import statement outside a module
The solutions I have tried.
After all, I found ECMAScript Modules from the JEST official document, the four steps perfectly solved my problem. I pasted their instructions here, however, you should take a look at the document itself.
