[2024.05.30] tailwind css 환경설정 에러: "File is a CommonJS module; it may be converted to an ES module"

tailwind css 사용 후 환경설정을 하는데 tailwind.config.js에서 다음과 같은 메시지가 떠서 어떤 종류인지 알아보았다.

tailwind.config.js

발생한 메시지

해당 메시지를 직역하자면 '파일은 CommonJS 모듈이며 ES 모듈로 변환될 수 있습니다'로 해석된다. 모듈? 모듈은 많이 들어봤는데 CommJS 모듈과 ES module이라는 것이 어떤 건지 모르기에 한 번 알아보았다.

 

1. Common JS

CommonJS는 서버 사이드 JavaScript를 위해 개발된 모듈 시스템이며, Node.js가 이를 채택하면서 널리 사용되기 시작하였다. 때문에 Node.js 에서 자바스크립트 패키지를 불러올 때 사용되며, 브라우저에서도 사용될 수 있다.

 

※ Common JS 사용법

• 모듈을 정의하고 내보낼 때 module.exports를 사용
• 모듈을 가져올 때 require를 사용
• 아래는 사용 예시

// calculator.js
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};

// main.js
const math = require('./calculator');
console.log(math.add(2, 3)); // 5

 

2. ES Module

ECMAScript 2015 (ES6)부터 표준의 일부로 도입되었으며, 브라우저와 서버 양쪽에서 사용될 수 있도록 설계되었다. 현재 Common JS보다 default로 사용되는 추세이다.

 

※  ES Module 사용법

• 모듈을 정의하고 내보낼 때 export와 export default를 사용
• 모듈을 가져올 때 import를 사용
• 아래는 사용 예시

// calculator.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// default export
export default {
  add,
  subtract,
};

// main.js
import { add, subtract } from './calcualtor';
console.log(add(2, 3)); // 5

// default import
import math from './calcualtor';
console.log(math.add(2, 3)); // 5

 

-> 현대 브라우저는 ES 모듈을 네이티브로 지원하며, <script type="module"> 태그를 사용하여 브라우저에서 모듈을 로드할 수 있다.

 

※ 두 모듈의 주요 차이점

1. 구문 차이:
   • CommonJS: require, module.exports
   • ES 모듈: import, export
2. 로딩 방식:
   • CommonJS: 동기적 로딩
   • ES 모듈: 비동기적 로딩
3. 표준화:
   • CommonJS: Node.js에서 사용, JavaScript 표준 일부가 아님
   • ES 모듈: ECMAScript 표준 일부, 최신 JavaScript 표준
4. 사용 환경:
   • CommonJS: 주로 Node.js (서버사이드)
   • ES 모듈: 브라우저와 서버 양쪽에서 사용 가능
5. 정적 분석:
   • CommonJS: 런타임에 모듈 결정
   • ES 모듈: 정적으로 구조 분석 가능, 트리 쉐이킹에 유리

 

※ 때문에 문제를 해결하려면

다른 파일에서 기본적으로 ES 모듈을 사용하기 때문에 거기에 맞춰 통일을 해줘야한다. 모듈 시스템은 동작 방식이 다르기 때문에 혼용할 때 충돌이나 예기치 못한 동작이 발생할 수 있게 되기 때문이다. 아래 사진과 같이 수정을 해주면 메시지가 사라지고 정상 작동한다.

export default로 수정

 

 

※ 이 주제 공부를 위해 읽어볼만한 블로그

1. Common JS와 ES module을 다룬 2부작

 - 1부:  https://yceffort.kr/2023/05/what-is-commonjs

 - 2부: https://yceffort.kr/2023/05/why-esmodule

 

2. Common JS의 역사: https://godtaehee.tistory.com/7

3. ESModule을 사용하는 이유: https://zubetcha.tistory.com/entry/Javascript-ES-Module