240313 개발일지 TIL - Vercel 배포 중 빌드가 되지 않는 현상

71:17  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Failed to compile.
./src/components/PaymentForm.tsx:127:23
Type error: Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & SelectProps'.
  Property 'className' does not exist on type 'IntrinsicAttributes & SelectProps'.
  125 |               </div>
  126 |               <p className="mb-4">배송 메모</p>
> 127 |               <Select className="mb-4">
      |                       ^
  128 |                 <SelectTrigger className="w-full bg-gray-100 border border-gray-300">
  129 |                   <SelectValue
  130 |                     placeholder="배송메모를 선택해주세요"
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1
Deployment Summary
Assigning Custom Domains
Merge pull request #8 from dev-hjs/dev - 606250

Project Limit Reached

This Personal Account Avatar for webdavchatGPT has reached the 200 project Hobby limit.

To continue, please create a Pro team or select a different account.

Learn more about Project Limits

New Project – Vercel

문제 발생

git 레포지토리에 작업 하던 부분까지 올리고 vercel에 첫 배포를 시도하던 중 발생

문제 원인

next.js에서 shadcn/ui와 TailwindCSS를 접목해 사용중인데
임시로 상품 섬네일을 더미데이터로 html 작성하듯이

<img src="https://picsum.photos/100/100" alt="상품 이미지" /> 

로 테스트 함.
로컬환경에서는 문제가 없었지만 vercel에서 빌드가 되지 않는 현상이 발생.

해결 방법

import Image from "next/image";
<Image src="https://picsum.photos/100/100"
  width={100}
  height={100}
  alt="상품 이미지"
/>

img 태그를 위 코드처럼 수정하였지만 로컬환경에서 오류가 발생해
next.config.mjs 파일에

images: {
    domains: ["picsum.photos"],
}

이 부분도 추가해 해결.

// 수정 전
<Select className="mb-4"></Select>

// 수정 후
<Select></Select>

그리고 shadcn/ui와 TailwindCSS을 사용하고 있지만 shadcn/ui 자체 태그에 들어간 TailwindCSS를 제거해준다.

여기까지 수정하여 다시 vercel에서 빌드가 문제없이 진행되며 배포가 정상적으로 완료된다.

느낀 점

배포까지 해야 완료!
정상 배포 되어야 완료!
에디터의 경고메시지를 무시하지 말 것!