Uncaught SyntaxError: export declarations may only appear at top level of a module

Question

Good afternoon, I was trying to export the values of 'nameValue' and 'passValue' to use them in another javascript file but I can't export them.

I get the following error:

Uncaught SyntaxError: export declarations may only appear at top level of a module

I am not using any framework or library (Javascript Vanilla only)

document.addEventListener('DOMContentLoaded', () => {
  console.info('This is running!')

  let name = document.getElementById('name')
  let password = document.getElementById('password')
  let loginBtn = document.getElementById('loginBtn').addEventListener('click', () => {
    nameValue = name.value
    passValue = password.value 

    export {nameValue, passValue}

    event.preventDefault()
  })  
})

How do you expect the "other file" to use them?

Bergi
– Bergi

2022-01-19 01:56:33 +00:00
Commented Jan 19, 2022 at 1:56 — Bergi
– Bergi, Commented Jan 19, 2022 at 1:56

Christian Fritz · Accepted Answer · 2022-01-19 01:40:41Z

4

The error is trying to say that you can use export only at the top level of your code, i.e., not in a function body or similar. Your variables will need to be defined at that level, too.

let nameValue, passValue;

document.addEventListener('DOMContentLoaded', () => {
  console.info('This is running!')

  let name = document.getElementById('name')
  let password = document.getElementById('password')
  let loginBtn = document.getElementById('loginBtn').addEventListener('click', () => {
    nameValue = name.value
    passValue = password.value 

    event.preventDefault()
  })  
})

export {nameValue, passValue}

edited Jan 19, 2022 at 1:40

answered Jan 19, 2022 at 1:24

Christian Fritz

21.5k3 gold badges48 silver badges82 bronze badges

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

Comments

Brian Zelip · Accepted Answer · 2023-09-17 17:42:18Z

2

Check if you included a type=“module” attribute in the script tag

<script src="example.js" type="module"><\script>

edited Sep 17, 2023 at 17:42

Brian Zelip

3,2417 gold badges38 silver badges50 bronze badges

answered Aug 14, 2022 at 15:59

Stephanie Egbuonu

312 bronze badges

Comments

Nikhil kumar · Accepted Answer · 2024-01-04 06:25:04Z

1

Don't include both script if you using export import to each other.

<script src="./assets/scripts/app.js" type="module"></script>
<script src="./assets/scripts/util.js" ></script>

answered Jan 4, 2024 at 6:25

Nikhil kumar

6912 gold badges7 silver badges16 bronze badges

Collectives™ on Stack Overflow

Uncaught SyntaxError: export declarations may only appear at top level of a module

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related