'Uncaught SyntaxError: 모듈 외부에서 import 문을 사용할 수 없음' 수정 방법

이 빠른 가이드에서는 매우 일반적인 오류인 "Uncaught SyntaxError: Cannot use import statement outside a module"을 해결하는 방법을 살펴보겠습니다. 이 오류는 모듈에 대해 설정되지 않은 프로젝트 내부에서 import를 사용하려고 할 때 발생하므로 이를 해결하는 방법을 살펴보겠습니다.

모듈 오류 외부의 import 문 해결

이 오류가 발생하는 이유는 module 문을 사용하기 위해 해당 파일이 import 임을 Javascript에 명시적으로 알려야 하기 때문입니다. 예를 들어, 아래 줄을 사용하고 있고 파일이 모듈임을 Javascript에 알리지 않은 경우 오류가 발생합니다.

import fs from 'fs'

오류가 발생하는 위치에 따라 몇 가지 해결 방법이 있습니다.

Node.js에서 가져오기 모듈 오류 해결

Node.js를 사용하는 경우 이 오류는 두 가지 방법으로 해결할 수 있습니다. 첫 번째는 이 전체 프로젝트가 모듈임을 Node.js에 알리기 위해 package.json을 업데이트하는 것입니다. package.json을 열고 최상위 수준에서 "type": "module"를 추가합니다. 예를 들어 mypackage.json는 다음과 같습니다.

{
    // ... other package.json stuff
    "type": "module"
    // ... other package.json stuff
}

이렇게 하면 문제가 즉시 해결됩니다. 그러나 일부 극단적인 경우에는 이에 문제가 있을 수 있으며 코드의 다른 부분에서 오류가 발생할 수 있습니다. 프로젝트에서 하나의 파일만 import 를 지원하려면 파일 확장자를 .mjs 로 변경하십시오. 예를 들어 import가 index.js에 있는 경우 index.js를 index.mjs로 이름을 바꿉니다. 이제 문제가 해결될 것입니다.

스크립트 태그에서 가져오기 모듈 오류 해결

이 오류가 발생할 수 있는 두 번째 위치는 다음과 같은 스크립트 태그입니다.

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

이 경우 mymodule.js에 import 문이 포함되어 있으면 작동하지 않습니다. 이 문제를 해결하려면 스크립트 태그에 type="module"를 추가하십시오.

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

이제 다시는 import 문제가 발생하지 않습니다.