Vercel로 배포할 때 만난 에러 정리 (with. next.js, typescript, tailwindCSS, prisma)

next.js, typescript,  tailwindCSS, prisma로 개발한 프로젝트를 Vercel로 배포할 때 여러가지 에러가 났었다.
이 에러들을 어떻게 해결했는지 정리해보려고 한다.

1. error - ESLint: Failed to load config "plugin:prettier/recommand" to extend from. Referenced from: /vercel/path0/.eslintrc.json Failed to compile.

이 오류는 ESLint 구성 파일인 .eslintrc.json에서 "plugin:prettier/recommand"을 확장하려고 할 때 발생한다. 

 

나는 원래 eslint를 사용하여 프로젝트 코드를 작성하는데 왜인지 이 프로젝트에서는 eslint를 적용했는데도 eslint가 먹지 않았다.
몇시간, 며칠동안 해결해보려고 했지만 결국 찾지못해서 일단 프로젝트를 진행했는데
vercel에서 eslint 오류가 날 줄이야...

그런데 에러 이유는 간단했다.

.eslintrc.json가 기존에 이렇게 작성되어 있었는데

  "extends": [ 
    "plugin:prettier/recommended", 
    "plugin:react-hooks/recommended", 
    "plugin:@typescript-eslint/recommended", 
    "plugin:prettier/recommand" 
  ],

 

"plugin:prettier/recommand" => "plugin:prettier/recommended" 이렇게 바꿨더니 해결됐다.

  "extends": [ 
    "plugin:prettier/recommended", 
    "plugin:react-hooks/recommended", 
    "plugin:@typescript-eslint/recommended", 
    "plugin:prettier/recommended" 
  ],

왜 나는 recommand이렇게 썼었을까?.. 

"recommended"로 올바르게 입력하자!!!

---

2. Type error: Cannot find module './Header' or its corresponding type declarations.

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Failed to compile.
./components/Layout.tsx:1:20
Type error: Cannot find module './Header' or its corresponding type declarations.
> 1 | import Header from "./Header";
    |                    ^
  2 | 
  3 | export default function Layout({ children }: React.PropsWithChildren) {
  4 |   return (
Error: Command "npm run build" exited with 1
BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

 

이 오류는 ./components/Layout.tsx 파일의 첫 번째 줄에서 ./Header 모듈을 찾을 수 없다는 것이다.
예전에 header한 후 대문자로 시작해야하는데 소문자여서 Header로 바꿔준 적은 있다.
그래도 분명히 나는 올바르게 import해주고 있는데 왜 그럴까..
몇번을 다시 import 했는데도

Type error: Already included file name '/vercel/path0/components/Header.tsx' differs from file name '/vercel/path0/components/header.tsx' only in casing.
  The file is in the program because:
    Root file specified for compilation
    Imported via "./Header" from file '/vercel/path0/components/Layout.tsx'
    Root file specified for compilation

이 오류가 계속 떴다.. 문제는 똑같다 /Header 모듈을 찾을 수 없단다..

찾아보니 파일 이름의 대소문자가 일치하지 않아 발생하는 문제라고 한다.
오류 메시지에 따르면 /vercel/path0/components/Header.tsx 파일의 이름이
/vercel/path0/components/header.tsx와 대소문자만 다르다고 나와 있다는데...
이로 인해 프로그램에서 동일한 파일을 중복으로 인식하고 문제가 발생하고 있다고 한다.

https://stackoverflow.com/questions/51197940/file-name-differs-from-already-included-file-name-only-in-casing-on-relative-p

'File name differs from already included file name only in casing' on relative path with same casing

이 해결법을 보니 tsconfig.json를 만졌던데 나도 이렇게 해봤지만 오류는 똑같았다.

{
  "compilerOptions": {
    ...
    "forceConsistentCasingInFileNames": false,
    ...
  }
}

 

파일명을 소문자에서 대문자로 바꿨을 경우 잘 인식하지 못하는 문제가 있는 것 같다.

 

나는 Header의 폴더명을 MainHeader로 바꾸니 잘 인식해서 결국 해결했다.

---

3. PrismaClientInitializationError: Prisma has detected that this project was built on Vercel, which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered. To fix this, make sure to run the `prisma generate` command during the build process.

이 오류는 Vercel에서 캐시된 종속성으로 인해 Prisma Client가 업데이트되지 않았을 때 발생한다.

빌드 과정 중에 prisma generate 명령을 실행하도록 해야한다.

build에 prisma generate를 추가해주자.

"scripts": {
  "build": "prisma generate && next build"
},

 

4. TypeError: Cannot destructure property 'auth' of 'urlObj' as it is undefined.

TypeError: Cannot destructure property 'auth' of 'urlObj' as it is undefined.
    at formatUrl (/vercel/path0/node_modules/next/dist/shared/lib/router/utils/format-url.js:52:11)
    at formatWithValidation (/vercel/path0/node_modules/next/dist/shared/lib/router/utils/format-url.js:108:12)
    at resolveHref (/vercel/path0/node_modules/next/dist/shared/lib/router/utils/resolve-href.js:22:93)
    at /vercel/path0/.next/server/chunks/664.js:293:73
    at Object.Kc [as useMemo] (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:60:240)
    at exports.useMemo (/vercel/path0/node_modules/react/cjs/react.production.min.js:25:208)
    at LinkComponent (/vercel/path0/.next/server/chunks/664.js:285:43)
    at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:73:362)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)

이건 또 무슨 에러일까....!?

바로 Link 태그에서 나는 에러다.
https://github.com/wpengine/faustjs/issues/361

TypeError: Cannot destructure property 'auth' of 'urlObj' as it is undefined · Issue #361 · wpengine/faustjs

이 글을 보고 해결할 수 있었는데

<Link href={value ?? ''}>...</Link>

이렇게! 확실하게 없을 때는 '' 처리해주니 해결됐다.

 

---

 

 

프로젝트 배포 시 예기치 않은 에러가 많이 발생하여 걱정도 했었지만,
결국 모든 문제를 해결할 수 있었다.
열심히 만든 프로젝트를 배포하는 것은 정말 재미있는 순간인 것 같다 : )