react 초기세팅 에러

다른사이트를 모방하는게 아닌 새로운 서비스를 만들어보자는 제의가들어왔고, 프론트개발자로 프로젝트를하게 되었다.
그런테 초기세팅부터 문제가 발생 할 줄이야..

에러1 : [eslint] Cannot find module 'node:fs'

eslint를 설치하고 실행을 햇는데 아래와 같은 에러문구가 떴다.

Failed to compile.

[eslint] Cannot find module 'node:fs'
Require stack:
- /Users/sj/Desktop/cafeeodi/node_modules/synckit/lib/index.cjs
- /Users/sj/Desktop/cafeeodi/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
- /Users/sj/Desktop/cafeeodi/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
Occurred while linting /Users/sj/Desktop/cafeeodi/src/styles/theme.js:1
Rule: "prettier/prettier"
ERROR in [eslint] Cannot find module 'node:fs'
Require stack:
- /Users/sj/Desktop/cafeeodi/node_modules/synckit/lib/index.cjs
- /Users/sj/Desktop/cafeeodi/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
- /Users/sj/Desktop/cafeeodi/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
Occurred while linting /Users/sj/Desktop/cafeeodi/src/styles/theme.js:1
Rule: "prettier/prettier"

webpack compiled with 1 error

 

prettier/prettier' rule을 사용하는 ESLint가 'node:fs' 모듈을 찾지 못 했다는말 같다.
package.json에 잘 써져있는데 혹시 몰라서 다시 설치해봄

 npm install eslint eslint-plugin-prettier prettier --save-dev

안됨.

노드 모듈을 불러오지 못했다..경로문제도 확인해봤으나 아니였다.
내가 생각헸을때 기업협업때 설정한 prettier와 nvm 문제인거같았고 nvm의 번전을 먼저 올려보았다.

nvm use 18

노드의 버전을 18버전으로 변경하니 위의 문제는 해결 되었다.

---

에러 2 : Insert ⏎ prettier/prettier

이번에는 프리티어 문제가 발생했다.

insert 엔터..?

 

??? 뭐지 prettier의 문제인가?

한번도 이런적이 없어서 모르겠다.

서버를 켜봤으나 아무것도뜨지 않았고 빠트린게있나 돌아다니다 Router를 설정하지않은것을 알았다.

Router에 Main만 설정하고 저장을 누르니 아래와 같이 Deleter, Replace가 빨간 글씨로 많이 떴다.

 

내가 prettierc에 width를 2로 지정하였는데 자동적으로 4칸으로 설정되어서 발생하는 문제였다.

prettierc파일의 옵션이 위의 이미지설정보다 우선순위가 높다고 하는데 왜 적용이 안되는걸까..

 

이렇게 바꿔도 적용이 안된다.

그럼 원인은 하나다. 저장시 적용안되는 버튼.

검색창에 format on save 라고 검색하면 Editor: Format On Save라는 체크박스에 체크를하면 저장시 자동으로 설정해둔 포멧이 적용된다.

 

---

에러 3 컴포넌트 문제

서버가 켜지기는 하는데 아래와 같은 경고가 떴다.

Warning: React.jsx: type is invalid -- expected a string (for built-in comonents) or a class/function (for composite components...)

//발생원인

1. 잘못된 import 경로: 컴포넌트를 올바른 경로에서 가져오지 않은 경우 발생할 수 있다.

2. 잘못된 컴포넌트 이름: 컴포넌트 이름을 올바르게 입력하지 않은 경우 발생할 수 있다.

3. 컴포넌트를 import하지 않은 경우 : 컴포넌트를 import하지 않았거나, 컴포넌트를 제대로 export하지 않았을 경우 발생할 수 있다.

4. React 버전 호환성 문제

 

하지만 나는 GlobalFont와 GlobalStyle이 컴포넌트로 인식되지 않아서 발생하는 문제라고 생각했고

import, export 다 되어있었고 styled-components도 제대로 설치되어있는데 왜 저런 문제가 발생하는거지 싶었다.

 

아래처럼 GlobalFont의 색이 달라서 발생하는 문제일 까 싶었는데 (이것도 나중에 문제될거같긴하다)

 

Main 컴포넌트에 export를 했으나 그 안에 내용 요소들을 구성해놓고 정의를 하지않아서 에러가 발생하고 있었다.

Main에 style을 주니 잘 실행되었다.

---

📝 오늘의 생각

한달간 에디터 편집기만 만지다가 다시 react로 프로젝트를 하려니 초기세팅부터 많은 에러를 겪었다.

처음 react를 사용했을때도 초기세팅이 복잡하다고 생각했었는데 새삼 다시 느꼈다.

강의에서 주어진 설정으로 할때는 에러가 없었는데 이번에 조금 건드린걸로 이렇게 빵빵터진다니..

그래도 eslintrc과 prettier가 어떤역할을 하는지 어떻게 문제가 발생하는지를 직접적으로 알 수 있었다.