8

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.

SA Noyon Ahmed
  • 103
  • 2
  • 2
  • 8

2 Answers2

6

You need to include you import inside a module:

Try this:

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

Reference: ES Modules in Browsers

Guilherme Martin
  • 837
  • 1
  • 11
  • 22
  • 2
    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
  • 2
    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
  • 1
    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
1

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.

Nick Sugar
  • 379
  • 3
  • 5