I can't fixed a problem of "Uncaught SyntaxError: Cannot use import statement outside a module"

Question

I have "three" files in one folder 1. index.html 2. index.js 3. helper.js

I want to export code from helper.js and import code to index.js (I already link up index.js to index.html).

I did like that 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')
})

and finally helper.js

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

Then I run index.html file in chrome browser.

Chrome browser showing this message in the console.

Uncaught SyntaxError: Cannot use import statement outside a module

Please tell how can I solve that problem. I search on google and youtube, I did the same thing what they showed. As a result, the browser showing that massage.

score 3 · Answer 1 · answered Oct 02 '19 at 17:00

3

You need to include you import inside a module:

Try this:

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

Reference: ES Modules in Browsers

answered Oct 02 '19 at 17:00

Guilherme Martin

801
1
7
16

1

I tried **type="module"** but its showing error **Access to script at 'file:///D:/testing/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.** – SA Noyon Ahmed Oct 02 '19 at 17:03
1

Now it's another error. You trying to access a script without a origin. Browsers like chrome do not allow you to access files on the local filesystem with JavaScript. You need to install a web server like LiveServer. – Guilherme Martin Oct 02 '19 at 17:06
i would not do it like that what did you tell.I want to solve it normally without do effects in index.html – SA Noyon Ahmed Oct 02 '19 at 17:09
https://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin – Guilherme Martin Oct 02 '19 at 17:38
your answer is confusing – SA Noyon Ahmed Oct 02 '19 at 17:54
what did they mean by **outside of module** ? – SA Noyon Ahmed Oct 02 '19 at 17:55

score 0 · Answer 2 · answered Oct 02 '19 at 18:02

You will need to serve your files with a web server on some port, say 5500. Then point your browser to that port i.e. localhost:5500/

This will be the only way the browser will import other modules from another js file.

See... MDN Doc on Modules

You can use the npm package http-server.
Or the extension Live Server if you are using Visual Studio Code.
Or any other server that you like that will work on your system.

Next you will need to add type="module" to your script tag.

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


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

And your index.js try this...

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

Lastly your helper.js ....

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

export { btn };

You might also think about using the .mjs extention on js files that are module. To let enyone know that it is indeed a module.

finally i solved my problem..my problem was in .babelrc file...ok thank you — SA Noyon Ahmed, Oct 02 '19 at 18:19
Good :) What was the problem in the .babelrc file? It might help others to edit your original question with your solution at the bottom. Happy coding! — Nick Sugar, Oct 02 '19 at 18:28

I can't fixed a problem of "Uncaught SyntaxError: Cannot use import statement outside a module"

2 Answers2

See... MDN Doc on Modules