“Uncaught SyntaxError: Cannot use import statement outside a module”

ASP.NET Core 를 다시금 접하면서 여러 문제 상황에 부딪히고 있지만 괜찮습니다. 이런 어려움을 겪어야 문제해결 시 따라오는 성취감의 중독이랄까 ?

 

동일한 문제로 고민하고 있는 누구한테는 너차럼 1시간을 버리지 않길 바라는 마음에 글을 올립니다. 나는 1시간을 정답을 찾아 헤매었으나 그 누구한테는 이 페이지가 검색만 된다면 몇초내로 답을 줄 수 있으니..

 

 물론 좀 같은 고생을 해봐야 기억이 날테지만 차라리 그 시간에 다른 공부를 하는데 시간을 쏟길
바라는 마음에..

Javascript 모듈화에 늘 관심이 있었는데 하도 방법이 다양해서 어느것이 가장 유지보수 시 편의성을 높이고 확장 가능한 방법인지를 중점에 두고 선택 하고자 하였습니다.

 

하지만 정답을 찾는데는 그리 오랜 시간이 걸리진 않았고 현재 시점 최근 Javascript 모듈화의 정점은 Javacript ES6 의 import , export 로 정리되는 것을 확인하였습니다.

 

기초적인 모듈화를 가장 쉽게 이해하기 쉽게 설명한 블로그 : https://ko.javascript.info/import-export

모듈 내보내고 가져오기

기본적인 사용 방법은 위 블로그를 참고 하기 바랍니다.

 

다만 중요한 것은 저 기술을 ASP.NET Core 에서 사용하기 위한 방법인데, 위 방법을 따라 적용해 보았지만 계속적으로 오류들이 발생되고 반영되지 않았습니다.

 

가장 첫번째로 등장한 문제는 " Uncaught SyntaxError: Cannot use import statement outside a module” 이였습니다.

 

먼가 import 를 할 수 없다는 문제 인 것으로 인지하고 여러 블로그는 검색했지만 해결 방법을 찾아 내지 못했습니다. 또 특히 ASP.NET Core + JQuery 를 사용하고 있어서 설명된 내용으로 답을 찾기가 어려웠습니다.

 

두어시간 삽질 후 해결한 방법은 공유 드립니다.

 

JQuery 를 사용 시 일반적인 선언부

  <script>
      $(document).ready(function () {
      	...
      })
</script>

Import 를 사용하기 위해 변경한 선언부

    <script type="module">
        import { alert } from '@Url.Content("~/assets/js/cosla.js")';

        $(document).ready(function () { 
        	...
        });
    </script?

위와 같이 <script> 부분에 type="module" 어튜리뷰트를 추가해주고 바로 하위에 import 문을 선언해주면 됩니다.

(저는 import 구문은  $(document).ready 하위에 선언하는 바람에 아래와 같은 오류도 만났습니다.)

 

아마도 스크립트 구문 가장 상단에 지정해야 되는 구문으로 보입니다.

 

Uncaught SyntaxError: Unexpected token '{'

 

또  ASP.NET 에서는 상대경로를 지정 시 ~ 문자를 사용하므로 꼭 브라우저가 해석할 수 있는 경로로 표시될 수 있도록 @Url.Content 를 사용해서 경로 지정을 해야합니다. 

 

지정한 경로에서 import 할 js 를 찾지 못한 경우엔 아래처럼 또 한번의 예외 메시지를 만나게 됩니다

 

Uncaught TypeError: Failed to resolve module specifier "~/assets/js/cosla.js)". Relative references must start with either "/", "./", or "../".