1. Errors

1) Cannot find Module ~.

Cannot find module '~~~' or its corresponding type declarations.

원인

컴포넌트 대소문자 차이 때문에 발생한 문제.
Github는 기본적으로 commit할때 파일명을 대문자에서 소문자로, 소문자에서 대문자로 변경하더라도 branch에 변경을 적용하지 않는다.
수동으로 이를 적용하게 설정해주어야 함.
Git 대소문자 구분 이슈

2) Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime

Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime 
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation nextauth

원인

Next.js의 Middleware에서 getSession을 사용해서 발생한 문제. Middleware는 아직 experimental한 기능이기 때문에, 쿠키기반의 JWT방식만을 지원하고 있음.

3) Cannot read properties of null(reading 'useState')

TypeError: Cannot read properties of null (reading 'useState')

4) Minified React error #321;

Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

원인(예상)

local에서 build 할때는 문제없으나, vercel에서 deploy할때만 에러발생.

1) NPM dependency 충돌?
-> .next, package-lock.json 및 npm cache 삭제 후 npm install
-> X
2) github security vulnera~ 업데이트후 에러?
-> package.json 변경사항 롤백
-> X
3) React 중복 import?
-> npm ls react
->

carrot-market@ C:\Users\mk448\Dv_study\fdbs_proto\fdbsVer1.0
├─┬ @uiw/react-md-editor@3.18.1
│ ├─┬ @uiw/react-markdown-preview@4.1.0
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ next-auth@4.12.3
│ └── react@17.0.2 deduped
├─┬ next@12.3.1
│ ├── react@17.0.2 deduped
│ ├─┬ styled-jsx@5.0.7
│ │ └── react@17.0.2 deduped
│ └─┬ use-sync-external-store@1.2.0
│   └── react@17.0.2 deduped
├─┬ react-chartjs-2@4.3.1
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-hook-form@7.37.0
│ └── react@17.0.2 deduped
├─┬ react-infinite-scroll-component@6.1.0
│ └── react@17.0.2 deduped
├─┬ react-js-pagination@3.0.3
│ └── react@16.14.0
├─┬ react-markdown@8.0.3
│ └── react@17.0.2 deduped
├─┬ react-router-dom@6.4.2
│ ├─┬ react-router@6.4.2
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├── react@17.0.2
├─┬ recoil@0.7.5
│ └── react@17.0.2 deduped
└─┬ swr@1.3.0
  └── react@17.0.2 deduped

4) 잘못된 hook 사용?
-> eslint 적용하여 error 찾기.
-> X
5) 버젼에 맞지 않은 라이브러리 사용?
-> X
6) NPM을 yarn으로 교체
-> 원인 발견
-> react를 18로 업그레이드한 뒤 다시 react를 17버젼으로 되돌렸는데, types 관련 찌꺼기(?) 파일이 남아있었던 것이었음.

해결

  "resolutions": {
    "@types/react": "17.0.2",
    "@types/react-dom": "17.0.2"
  }

package.json 파일에서
resolutions를 사용하여
types를 이전 버젼으로 강제하였다.

문제해결

다만 왜 NPM에서는 오류를 발견하지 못했을까? 하는 의문이 남는다. 다음 프로젝트에서는 되도록 yarn을 사용할것...

ETC

Warning: Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text