module is not defined 오류 해결 방법에 대해서 정리해 보았습니다.
결론부터 이야기하면 ESLint 와 함께 설정된 경우에 발생하며, ESLINT 설정 파일 .eslintrc.cjs에 세팅을 추가해야 에러가 사라집니다.
module is not defined
타입스크립트로 리액트 앱을 개발하는 중, tailwind.config.js 파일과 prettier.config.cjs 파일 에디터 상에서 다음과 같은 에러가 발생합니다.
해당 설정 파일은 아래의 2개에서 발생했습니다
하나는 prettier.config.cjs 파일의 module.exports에서,
// prettier.config.js
module.exports = {
plugins: [require("prettier-plugin-tailwindcss")],
};
또 하나는, tailwind.config.js 파일의 module.exports 에서 발생을 했습니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
...
ESLINT 설정 .eslintrc.cjs 필요
해당 타입스크립트 프로젝트에 ESLINT 가 설정된 경우이며, 이 경우에는 ESLINT 설정 파일 .eslintrc.cjs 에 다음을 추가해 주어야 합니다.
env > node : true
module.exports = {
root: true,
env: { browser: true, es2020: true, node: true },
ESLint 에서 node: true를 설정하면 ESLint가 Node js 환경에서의 코드를 이해할 수 있도록 정의하는 부분입니다.
위의 코드를 세팅해 주면 이제 오류가 사라집니다.
그 밖에 도움이 되는 글
리액트 타입스크립트 vite 환경 구성 튜토리얼(2023)