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()
  })  
})

Answer 1

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}

Answer 2

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

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