에러 문구
error ESLint: Failed to load config "next/core-web-vitals" to extend from. Referenced from: /vercel/path0/.eslintrc
원인
어쩐지 에러가 안잡히는 부분이 있더라더니 next.js에서의 ESLint 설정을 제공하는 패키지를 설치 하지 않았었다. 아래 명령어로 패키지를 설치하고 해결!
해결
npm i --save-dev eslint-config-next eslint-config-prettier eslint-plugin-prettier
https://stackoverflow.com/questions/69480558/error-failed-to-load-config-next-to-extend-from
Error: Failed to load config "next" to extend from
I have a Nextjs app using jest and react-testing-library for the test, I add the .eslintrc file with npx .eslintrc --init command to my project. whenever I lint my project, I get the following erro...
stackoverflow.com
https://nextjs.org/docs/pages/building-your-application/configuring/eslint#core-web-vitals
Configuring: ESLint | Next.js
Using Pages Router Features available in /pages
nextjs.org
에러문구
Error: 'React' is not defined. no-undef
원인
CRA에서 React를 자연스럽게 사용하다가
next.js에서 타입 설정을 해줄때
React.ChangeEvent~ 를 작성했다가 생긴 오류이다.
해결
next.js는 CRA와 같이 하나의 번들 파일에 모든 JS코드를 번들링 하는게 아니라
각 페이지별로 JS 번들을 생성하므로 CRA때 처럼 React가 루트파일에서 내려오는게 불가능하다.
React 가 필요한 각 컴포넌트에서 import해서 사용해야한다.
import { ReactNode } from 'react';
export default function RootLayout({
children,
}: {
children: ReactNode;
}) {
return (
<html lang='en'>
<body suppressHydrationWarning={true}>
<Header />
{children}
<Footer />
</body>
</html>
);
}에러문구
TypeError: Cannot read properties of undefined (reading 'startsWith')
원인
오늘 이 에러를 잡느라 거의 반나절을 썼다.
구글에 해당 에러를 치면 계속 나오는 mongodb 커뮤니티인데 .env 파일을 옮겨도 보고
에러 메세지에 있는 mongodb-connection-string-url 패키지에 들어가서 코드를 뜯어보기도하고
mongodb와 연결하는 코드에 한줄 마다 console.log를 찍어서 .env에서 들고온 값이 제대로 들어가는지도 살펴보고
변수앞에 NEXT_PUBLIC도 붙여보고 온갖 방법을 써도 안되어서 배포를 포기하려던 찰나..
저 startWith 메소드가 쓰이는 값이
이 곳이고 해당 변수는 저 조건을 만족하지만 배포환경에서는 undefined가 뜬다?
배포하는 코드는 github에 commit된 코드들이고 거기에는 env 파일이 없다.
따라서... 환경 변수 값은 배포사이트에 직접 등록을 해야한다.
너무 당연한건데 .. 너무어이없었다 ㅎㅎㅎㅎㅎㅎㅎㅎ
해결
나는 vercel에서 배포를 했고 Settings > Enviroment Variables 에 들어가면
직접 키와 값을 등록할 수 있다.
'Projects > Next.js board-project' 카테고리의 다른 글
| [Next.js] 묵혀둔 프로젝트 고치기 - 좋아요 기능 (0) | 2023.09.23 |
|---|---|
| [Next.js] cannot be used as a jsx component. (0) | 2023.09.20 |
