Module is not defined in ES module scope 오류 (postcss.config.js) + ESM과 CommonJS 정리

왼쪽 화면: 오류가 나타난 상태 / 오른쪽 화면: 수정한 상태

이전의 코드가 pnpm dev 명령어로 실행 시, 실행이 안되는 문제가 있었습니다.

[Failed to load PostCSS config: Failed to load PostCSS config

이 오류 메세지는 postcss.cofig.js 설정 파일을 생성했으나, 파일이 ES모듈로 처리되고 있지만 CommonJS 문법을 사용하고 있다는 뜻입니다.

오류가 발생하는 이유

package.json에 type: “module” 이 포함돼 있기 때문입니다. CommonJS 모듈은 서로 다른 모듈 시스템을 사용합니다.

문제 해결을 위해 오른쪽 화면의 코드로 변경했습니다.

---

CommonJS와 ES Modules

JS 모듈을 내보내거나 가져올 때 2가지 방식을 사용합니다.

• 첫 번째 방법은 module.export 로 모듈을 내보내고, require() 으로 접근하는 CommonJS
• 두번 째 방법은 export 로 모듈을 내보내고 import 로 접근하는 ES Modules

가 있습니다.

// CommonJS
module.export = {...}            // 모듈 내보낼 때
const utils = require('utils');  // 모듈 가져올 때

// ES Modules
export.default = () => {...}     // 모듈 내보낼 때
import utils from 'utils';       // 모듈 가져올 때

차이점

1. CommonJS

• NodeJS에서 지원하는 모듈 방식으로, 초기 Node 버전부터 사용됨
• 별도의 설정이 없다면 CommonJS가 기본값이다.
• top-level await가 불가능하므로 동기적으로 작동한다.
• 동기로 작용하므로 promise를 리턴하지 않고, module.export에 설정된 값 만을 리턴한다.
• import 순서에 따라 스크립트를 실행한다.

2. ES Module

• ECMAScript에서 지원하는 방식
• top-level await을 지원하므로 module loader가 비동기 환경에서 실행된다.
• CommonJS처럼 스크립트를 바로 실행하지 않고, import, export 구문을 찾아 스크립트를 파싱한다.
• 파싱 단계에서 import, export 에러를 감지할 수 있다.
• import와 export를 지원하지 않는 브라우저가 있을 수 있어, 사용을 위해 번들러가 필요하다.

ES Module 방식을 사용하기 위해서는 package.json에 type을 module로 설정해줘야 한다.

// package.json
{
	...
	type: "module",
	...
}

---

📌 참고: https://energneer.tistory.com/entry/ReferenceError-module-is-not-defined-in-ES-module-scope

🙋‍♀️ 내 작업 일지: 작업 일지 노션 링크