[ESLint] 'module' is not defined 해결법(React+TypeScript+Tailwind 환경)

 

 

React와 TypeScript 기반의 프로젝트에 Tailwind CSS 를 설치하는 과정에서 에러를 발견했다.

나중에 비슷한 일이 생기면 참고하기위해 기록해둔다.

 

일단 Tailwind CSS 설치하는 방법부터 시작!

 

Tailwind CSS  설치하기 

 

✅ 터미널을 열어 설치 명령어를 입력해준다.

 

npm install -D tailwindcss

 

 

✅ 설치가 완료되면 init 명령어를 입력한다. → tailwind.config.js 파일을 생성하기 위함

 

npx tailwindcss init

 

tailwind.config.js 파일이 생겨서 확인해보니...

 

에러가 났다!

'module' is not defined' 

 

검색을 해보니 ESlint 설정시 env 쪽에 node를 설정해주지 않아서 나타나는 현상이라고 한다.

env(환경) : 사전 정의된 전역 변수 사용을 정의함

 

✅ env에서 자주 사용되는 설정으로는 node와 browser가 있는데 해당 설정을 하지 않으면 console.log, require, module과 같은 사전에 정의된 전역변수 환경에 있는 staitc메서드를 인식할 수 없어서 에러가 발생한다고 한다.

 

✅ .eslintrc.js 파일을 열어본다.

현재 내 프로젝트가 가지고있는 설정파일엔 node:true 부분이 overrides 쪽에 들어가있는 것을 확인할 수 있다.

 

overrides : 프로젝트 내에서 일부 파일에 대해선 다른 설정을 적용해줘야할 때 사용하는 옵션

 

해결방법

✅ node:true 는 기본적으로 적용이 되어야하니 상단에 있는 env쪽으로 위치를 이동시켜준다.

 

변경 후 저장해주면..!

 

빨간줄이 사라진 것을 확인 할 수 있다! 

 

그런데..뭔가 거슬린다. 저 점 세개!  🤨🤨🤨

 

내용을 보면 해당 파일은 CommnJS module이며 es모듈로 변환 될 수 있다고 알려준다.

에러는 아니지만 뭔가 거슬린다!

 

✅ 검색을 해보니 이 부분은 vscode 설정을 변경해주면 해결할 수 있다고 한다.

 

해결방법

✅ 윈도우 기준) ctrl + , 키를 이용하여  settings 창을 열어준다.

✅ validate 검색 > TypeScript > JavaScript > validate: Enable 체크 해제

 

 

 

짠! 모든 것이 해결되었다~

 

 

---

Reference

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

https://stackoverflow.com/questions/49582984/how-do-i-disable-js-file-is-a-commonjs-module-it-may-be-converted-to-an-es6

How do I disable: [js] File is a CommonJS module; it may be converted to an ES6 module

https://www.daleseo.com/eslint-config/

ESLint 상세 설정 가이드

https://velog.io/@kyusung/eslint-config-2

ESLint 설정 살펴보기