모듈 외부에서 Import 문을 사용할 수 없습니다: 이 일반적인 오류를 해결하는 방법

JavaScript는 ES6 모듈의 도입으로 상당한 변화를 겪었으며 개발자에게 코드를 구성하고 재사용할 수 있는 현대적이고 효율적인 방법을 제공합니다. 그러나 이러한 모듈을 사용할 때 발생하는 일반적인 오류 중 하나는 다음과 같습니다. "모듈 외부에서 import 문을 사용할 수 없습니다." 이 문제는 특히 ES6 모듈을 처음 접하는 개발자에게는 실망스러울 수 있습니다. 이번 블로그에서는 이 오류가 무엇을 의미하는지, 왜 발생하는지, 해결 방법은 무엇인지 알아보겠습니다.

오류의 의미는 무엇입니까?

기본적으로 ES6 모듈을 지원하지 않는 환경에서 JavaScript가 ES6 import 문을 해석하려고 하면 "모듈 외부에서 import 문을 사용할 수 없습니다." 오류가 발생합니다.

이 오류를 이해하려면 ES6 모듈과 CommonJS 모듈을 구별해야 합니다.

• CommonJS: Node.js에서 사용하는 이전 모듈 시스템으로, require()를 사용하여 종속성을 가져옵니다.
• ES6 모듈: ES6에 도입된 최신 시스템으로, 모듈화를 위해 가져오기 및 내보내기를 사용합니다.

이 오류는 일반적으로 환경(예: Node.js 또는 브라우저)이 ES6 모듈을 처리하도록 설정되지 않았거나 ES6 모듈을 처리하도록 잘못 구성되었기 때문에 발생합니다.

오류의 일반적인 원인

오류를 해결하려면 근본 원인을 이해하는 것이 중요합니다. 가장 일반적인 이유는 다음과 같습니다.

1. 잘못된 환경: Node.js 환경에서 모듈을 구성하지 않고 ES6 모듈을 실행하는 경우 이 오류가 발생합니다. 기본적으로 Node.js는 CommonJS를 사용합니다.
2. 파일 확장자 문제: .js 확장자를 가진 파일은 ES6 모듈로 처리하도록 환경을 명시적으로 구성하지 않는 한 Node.js에서 CommonJS 모듈로 처리됩니다.
3. 오래된 도구: 오래된 빌드 도구나 번들러(예: Webpack 또는 Babel)는 최신 모듈 구문을 제대로 처리하도록 구성되지 않을 수 있습니다.

오류 해결 방법

환경 및 사용 사례에 따라 "모듈 외부에서 import 문을 사용할 수 없습니다." 오류

를 해결하는 방법에는 여러 가지가 있습니다.

1. package.json에 "type": "module" 추가

프로젝트가 ES6 모듈을 사용한다는 것을 Node.js에 명시적으로 알리려면 package.json 파일에 다음을 추가하세요.

json

코드 복사

{ 

  "유형": "모듈" 

} 

이 간단한 변경으로 Node.js는 프로젝트의 .js 파일을 ES6 모듈로 처리합니다.

2. .mjs 파일 확장자 사용

또는 .mjs 확장자를 사용하도록 JavaScript 파일의 이름을 바꾸세요. Node.js는 기본적으로 .mjs 파일을 ES6 모듈로 처리합니다.

3. 환경 업데이트

최신 버전의 Node.js나 ES6 모듈을 지원하는 기타 도구를 사용하고 있는지 확인하세요. Node.js 버전을 확인하려면 다음 명령을 실행하세요.

배쉬

코드 복사

노드 -v

오래된 버전이라면 최신 버전으로 업데이트하세요.

4. Babel을 이용한 코드 트랜스파일

이전 환경이나 브라우저를 지원해야 하는 경우 Babel을 사용하여 ES6 모듈 코드를 CommonJS로 변환할 수 있습니다. Babel을 설치하고 호환성을 보장하기 위해 필요한 사전 설정으로 구성합니다.

배쉬

코드 복사

npm install @babel/core @babel/cli @babel/preset-env --save-dev 

다음 구성으로 .babelrc 파일을 만듭니다.

json

코드 복사

{ 

  "presets": ["@babel/preset-env"] 

} 

Babel을 실행하여 코드를 트랜스파일하세요.

배쉬

코드 복사

npx babel src --out-dir dist

5. 번들러 구성 확인

Webpack이나 Rollup과 같은 번들러를 사용하는 경우 모듈 설정이 올바르게 구성되었는지 확인하세요. 예를 들어 Webpack에서는 output.libraryTarget 옵션을 module:

으로 설정합니다.

자바스크립트

코드 복사

module.exports = { 

  출력: { 

    libraryTarget: '모듈' 

  }, 

  실험: { 

    출력모듈: true 

  } 

}; 

예시 시나리오 및 수정 사항

이 오류를 해결하는 방법을 더 잘 이해하기 위해 몇 가지 실제 예를 살펴보겠습니다.

예 1: Node.js에서 가져오기 사용

Node.js에서 다음 코드를 실행하려고 합니다.

자바스크립트

코드 복사

'express'에서 express를 가져옵니다. 

const app = express(); 

package.json에 "type": "module"이 포함되어 있지 않으면 오류가 발생합니다. 이 문제를 해결하려면 package.json에 다음을 추가하세요.

json

코드 복사

{ 

  "유형": "모듈" 

} 

예 2: 이전 브라우저에서 가져오기 실행

ES6 가져오기를 기본적으로 지원하지 않는 이전 브라우저에서 사용하려고 합니다. 여기서 해결책은 Babel을 사용하여 코드를 변환하고 Webpack과 같은 번들러를 사용하여 브라우저 호환성을 위해 번들로 묶는 것입니다.

디버깅 팁

위의 수정 사항을 시도한 후에도 여전히 오류가 발생하는 경우 다음 추가 디버깅 전략을 고려하세요.

• Node.js 버전 확인: Node.js 버전이 ES6 모듈(버전 12 이상)을 지원하는지 확인하세요.
• 구성 파일 검토: 적절한 모듈 설정을 위해 package.json 및 빌드 도구 구성을 다시 확인하세요.
• 빌드 도구 검사: 번들러나 트랜스파일러가 최신 구문을 처리하도록 설정되어 있는지 확인하세요.

모듈 작업 모범 사례

이 오류가 발생하지 않도록 하고 원활한 개발을 보장하려면 다음 모범 사례를 따르십시오.

• Node.js, 브라우저 및 도구를 항상 최신 상태로 유지하세요.
• 모듈식 파일에는 .mjs를 사용하거나 프로젝트에서 "type": "module"을 지정하세요.
• 이전 환경과의 호환성을 보장하려면 Babel과 번들러를 사용하세요.
• Lint 도구를 활용하여 구성 문제를 조기에 발견하세요.

결론

"모듈 외부에서 import 문을 사용할 수 없습니다." 오류는 JavaScript 개발자에게 일반적이지만 쉽게 해결할 수 있는 문제입니다. Node.js를 사용하든, 브라우저를 사용하든, 빌드 도구를 사용하든 원인을 이해하고 올바른 수정 사항을 적용하면 ES6 모듈을 원활하게 사용하는 데 도움이 됩니다. 이 가이드에 설명된 단계와 모범 사례를 따르면 이 오류를 방지하고 JavaScript 프로젝트의 효율성을 향상시킬 수 있습니다.

위 내용은 모듈 외부에서 Import 문을 사용할 수 없습니다: 이 일반적인 오류를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!