Menu
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.
936
The "SyntaxError: Cannot use import statement outside a module" occurs when we use the ES6 Modules syntax in a script that was not loaded as a module. To solve the error, set the type attribute to module when loading a script, or in your package. json for Node. js apps.
You're using Node without the proper package. json settings. You're using a browser version that doesn't support ES modules. You didn't properly specify the type in your browser <script> tag.
ES modules are the standard for JavaScript, while CommonJS is the default in Node. js. The ES module format was created to standardize the JavaScript module system. It has become the standard format for encapsulating JavaScript code for reuse. The CommonJS module system, on the other hand, is built into Node.
You need to include you import inside a module:
Try this:
<script type="module">
import btn from './helper'
</script>
Reference: ES Modules in Browsers
111
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.
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
