[JavaScript] Uncaught SyntaxError: Cannot use import statement outside a module 오류

문제상황

 

바닐라 JS로 프로젝트를 할때 html을 잘못 연결하면 아래와 같은 오류가 발생한다.

 

Uncaught SyntaxError: Cannot use import statement outside a module

index.js

import App from './component/App.js';
new App(document.querySelector('.app'));

 

index.html

<script src="./src/js/index.js"></script>

module이 아닌 것에서 import를 했다는 것인데,   script 타입의 속성을 module로 명시하지 않아서 생긴 문제다.

 

 

 

 

해결방안

 

<script src="./src/js/index.js" type="module"></script>

module이란 

JavaScript 코드의 크기가 갈수록 커지고 기능도 복잡해지자 코드 전체를 기능단위인 코드 뭉치로 분해하고 결합하는 시스템을 마련했는데 그것이바로 Module System! 그럼 그 코드뭉치들은 Module이 되는 것

 

script 태그에 type="module"을 준 스크립트는 defer을 붙인 것 처럼 HTML문서가 완전히 만들어진 후 실행된다.

따라서 모듈을 외부에서 불러올때는 브라우저가 외부 모듈 스크립트를 병렬적으로 불러오게 된다.

 

 

참고:https://velog.io/@takeknowledge/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-%ED%95%99%EC%8A%B5-%EB%82%B4%EC%9A%A9-%EC%9A%94%EC%95%BD-lwk4drjnni