JavaScript 및 TypeScript 개발자로서 우리는 다양한 모듈 시스템으로 작업하는 동안 예상치 못한 오류에 자주 직면합니다. 일반적인 문제 중 하나는 "모듈 외부에서 import 문을 사용할 수 없습니다" 오류입니다. 이는 일반적으로 최신 ES 모듈(ESM)을 사용하거나 Webpack, Babel 또는 Node.js 환경과 같은 번들러와 관련된 설정을 처리할 때 발생합니다. 이 블로그에서는 이 오류의 원인, 발생 이유 및 이를 해결하기 위한 실용적인 솔루션을 살펴보겠습니다.

이 오류는 무엇을 의미합니까?

"모듈 외부에서 import 문을 사용할 수 없습니다" 오류는 설명이 필요하지 않습니다. 이 오류는 JavaScript가 유효한 ES 모듈 외부에서 import 문을 발견할 때 발생합니다. JavaScript에서 모듈 시스템은 코드 분할 방법을 결정합니다. ES 모듈(가져오기/내보내기)과 CommonJS(require/module.exports)는 두 가지 기본 모듈 시스템입니다.

JavaScript가 코드를 ES 모듈로 인식하지 못하는 경우 이 오류가 발생합니다.

"모듈 외부에서 Import 문을 사용할 수 없습니다" 오류의 원인은 무엇입니까?

이는 일반적으로 JavaScript/TypeScript가 모듈 컨텍스트 외부에서 import 문을 발견할 때 발생합니다. 이는 가져오려는 파일이 ES 모듈로 인식되지 않음을 의미합니다.

이 오류가 발생할 수 있는 일반적인 이유는 다음과 같습니다.

• Node.js 기본적으로 CommonJS 사용: 기본적으로 Node.js는 ES 모듈이 아닌 CommonJS(CJS) 모듈을 사용합니다. 이는 지정하지 않는 한 가져오기/내보내기 구문이 기본적으로 지원되지 않음을 의미합니다.

• 잘못 구성된 Babel/Webpack: 코드를 번들링할 때 Babel 또는 Webpack과 같은 도구가 ES 모듈을 올바르게 처리하도록 구성되지 않을 수 있습니다. 특히 대상 환경이 기본적으로 ES 모듈을 지원하지 않는 경우에는 더욱 그렇습니다.

• "type" 누락: package.json의 "module": Node.js 프로젝트에서 ES 모듈을 사용하는 경우 "type"을 추가하여 명시적으로 지정해야 합니다. : package.json의 "모듈".

• 파일 확장자 불일치: ES 모듈에 .mjs 대신 .js를 사용하거나 그 반대로 사용하면 이 오류가 발생할 수 있습니다.

단계별 솔루션

다음은 "모듈 외부에서 import 문을 사용할 수 없습니다" 오류를 해결하는 몇 가지 해결 방법입니다.

• Node.js에서 ES 모듈 활성화:

가장 일반적인 경우는 Node.js로 작업할 때이며, 기본값은 CommonJS 모듈입니다. ES 모듈을 활성화하려면 다음을 수행하십시오.

방법 1: package.json 수정:

{
  "type": "module"
}

package.json에 "type": "module"을 추가하면 Node.js가 모든 .js 파일을 ES 모듈로 처리하도록 지시하는 것입니다.

방법 2: 파일 이름을 .mjs로 변경:

package.json을 수정하지 않으려면 파일 이름을 .mjs(예: index.mjs)로 바꾸어 ES 모듈임을 명시적으로 표시할 수 있습니다.

• Babel/Webpack 구성 업데이트:

Babel 또는 Webpack을 사용하는 경우 ES 모듈을 올바르게 처리하도록 구성되었는지 확인하세요. Babel의 경우 @babel/preset-modules 플러그인을 사용할 수 있습니다. Webpack의 경우 구성에서 모듈을 false로 설정하세요.

Babel의 경우: .babelrc 또는 babel.config.json 파일을 업데이트합니다.

{
  "presets": ["@babel/preset-modules"]
}

Webpack의 경우: webpack.config.js 파일을 업데이트합니다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

• 가져오기 경로 및 구문 확인:

가져오기 경로가 올바른지, 올바른 구문을 사용하고 있는지 확인하세요. 예를 들어 상대 경로는 ./ 또는 ../.

node_modules에서 모듈을 가져오는 경우 패키지가 ES 모듈을 지원하는지 확인하세요. 그렇지 않은 경우 Webpack과 같은 번들러를 사용하여 처리해야 할 수도 있습니다.

• 파일 확장자 다시 확인:

ES 모듈을 사용하는 경우 파일 확장자가 모듈 유형과 일치하는지 확인하세요. ES 모듈에는 .mjs를 사용하고 CommonJS 모듈에는 .js를 사용하세요.

• .mjs: ES 모듈
• .cjs: CommonJS 모듈

ES 모듈과 CommonJS 모듈의 차이점은 무엇입니까?

그래서 떠오르는 것 중 하나는 ES 모듈과 CommonJS 모듈의 차이점이 무엇입니까? 그리고 JavaScript에는 왜 두 개의 서로 다른 모듈 시스템이 있는 걸까요?

ES 모듈

ES 모듈은 ES6(ES2015)에 도입된 공식 JavaScript 모듈 시스템입니다. import 및 내보내기 키워드를 사용하여 모듈 간의 종속성을 정의합니다. ES 모듈은 정적으로 분석 가능합니다. 즉, 컴파일 타임에 종속성이 해결되어 코드를 더 쉽게 최적화할 수 있습니다.

ES 모듈은 비동기식으로 로드되므로 모듈의 성능이 향상되고 병렬 로드가 가능합니다. 또한 명명된 내보내기, 기본 내보내기 및 순환 종속성을 지원합니다. ES 모듈은 최신 브라우저와 Node.js에서 널리 지원됩니다("type": "module" 플래그 사용).

CommonJS 모듈

CommonJS는 ES 모듈이 도입되기 전에 Node.js 및 기타 환경에서 사용된 모듈 시스템입니다. CommonJS 모듈은 require 함수를 사용하여 모듈을 가져오고 module.exports 또는 내보내기 값을 내보냅니다. CommonJS 모듈은 동기식으로 로드되므로 성능 문제가 발생할 수 있습니다.

CommonJS 모듈은 기본적으로 브라우저에서 지원되지 않지만 Babel 또는 Webpack과 같은 도구를 사용하여 ES 모듈로 트랜스파일될 수 있습니다. CommonJS 모듈은 여전히 ​​Node.js 프로젝트에서 널리 사용되지만 ES 모듈은 더 나은 성능과 정적 분석 가능성으로 인해 점점 더 인기를 얻고 있습니다.

이 두 모듈 시스템이 존재하는 이유는 JavaScript의 발전과 보다 현대적이고 표준화된 모듈 시스템의 필요성 때문입니다. ES 모듈은 JavaScript 모듈의 미래이지만 CommonJS 모듈은 여전히 ​​기존 프로젝트 및 환경에서 널리 사용되고 있습니다.

디버깅 팁

위의 모든 해결 방법을 시도했지만 여전히 오류가 발생하는 경우 다음 몇 가지 추가 디버깅 팁을 참조하세요.

• Node.js 버전 확인: ES 모듈 지원이 Node.js 12에서 기본적으로 도입되었으므로 Node.js 버전 12.x 이상을 실행하고 있는지 확인하세요. 이전 버전에서는 ES 모듈이 작동하지 않습니다. Node.js 웹사이트를 방문하여 버전을 업데이트하세요.

• 브라우저 지원 확인: 브라우저 환경에서 작업하는 경우 브라우저가 ES 모듈을 지원하는지 확인하세요. 대부분의 최신 브라우저에서는 가능하지만 이전 버전에서는 그렇지 않을 수도 있습니다.

• 오타 확인: 때로는 코드의 단순한 오타로 인해 이 오류가 발생할 수 있습니다. 코드에 철자 오류나 잘못된 구문이 있는지 다시 확인하세요.

• TypeScript에 npx tsc 사용: TypeScript를 사용하는 중 이 오류가 발생하는 경우 npx tsc를 실행하여 TypeScript 코드를 JavaScript로 컴파일하면 문제를 찾는 데 도움이 될 수 있습니다.

결론

"모듈 외부에서 import 문을 사용할 수 없습니다" 오류는 ES 모듈 작업 시 JavaScript/TypeScript 개발자가 직면하는 일반적인 문제입니다. 이 오류가 발생하는 이유를 이해하고 이 블로그에 제공된 단계별 솔루션을 따르면 오류를 신속하게 해결하고 유지 관리가 가능한 모듈식 코드를 계속 구축할 수 있습니다.