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

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.

Guilherme Martin · Accepted Answer · 2019-10-02 17:00:58Z

7

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 2, 2019 at 17:00

Guilherme Martin

8571 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SA Noyon Ahmed Over a year ago

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.

Guilherme Martin Over a year ago

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.

SA Noyon Ahmed Over a year ago

i would not do it like that what did you tell.I want to solve it normally without do effects in index.html

Guilherme Martin Over a year ago

stackoverflow.com/questions/8456538/…

SA Noyon Ahmed Over a year ago

your answer is confusing

|

Nick Sugar · Accepted Answer · 2019-10-02 18:02:25Z

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
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!

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

See... MDN Doc on Modules

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

See... MDN Doc on Modules

2 Comments

Linked

Related