Uncaught SyntaxError: Unexpected token 'export'

 

#swichEl;
  constructor() {
    this.#assignElement();
    this.#addEvent();
  }
  #assignElement() {
    this.#swichEl = document.getElementById("#switch");
  }

  #addEvent() {
    this.#swichEl.addEventListener("change", (event) => {
      console.log(event.target.checked);
    });
  }

event.target.checked를 통해 boolean데이터로 check여부를 확인하고 싶었다. 하지만 원하는 데이터가 나오지 않았다.

결과

내가 생각한 boolean 데이터가 나오지 않았다. 개발자 도구를 열어보니

.checked가 먹히지 않는 것을 알 수 있었다. 개발자 도구에서 checked를 추가해보니 

Uncaught SyntaxError: Unexpected token 'export'

이런 에러가 나타났다. 연관된 에러 내용을 찾아보니 해당 에러가 발생되는 두 가지 주요 원인을 발견했다.

 

The "Uncaught SyntaxError Unexpected token 'export'" occurs for 2 main reasons:

1. Using the ES6 Module syntax in a Node.js application without type to module in package.json.
2. Using the ES6 Module syntax in a script without setting type to module in the script tag.

1. package.json에 type to module 없이 Node.js 애플리케이션에서 ES6 Module 구문을 사용했을 때.

2. 스크립트 태그에서 유형을 모듈로 설정하지 않고 스크립트에서 ES6 모듈 구문 사용했을 때.

 

원인을 찾아보니 나는 1번 유형에 해당하는 것 같았다.  json파일에 type 설정을 하지 않았다.

node.js 어플리케이션에서 ES6 모듈 구문을 사용할 수 있게 만들어줘야한다.

type을 모듈로 선언해주고 실행해보니

Module not found: Error: Can't resolve './keyboard' in

ES6 문법에 문제가 있다. ./keyboard.js로 바꾸고 실행하니 정상 작동되었다. 

+ 다시 한번 확인해보니 해당 문제의 주요 원인은 패키지의 버전과 번들 설정, 각 패키지 설정 부분에서 문제가 있었던 것 같다.