컴포넌트 생성할때 React가 없습니다 type error질문입니다.
컴포넌트를 새로 만들때 자꾸 React가 없습니다란 TS에러가 납니다...
그래서 React를 import해주면 TS에러가 해결되는데 검색해봐도 모르겠어서 질문남깁니당
import React from 'react'
const Loading = () => {
return(
<div>
Loading...
</div>
)
}
export default Loading;답변 2
0
안녕하세요 이정환입니다.
해당 오류는 타입스크립트 설정의 문제로 인해 발생하는 오류로 파일의 확장자를 "tsx"로 설정하시지 않았거나 혹은 tsconfig.json 컴파일러 옵션이 강의와 다르게 설정되어 있을 때 발생할 수 있습니다.
따라서 파일의 확장자가 tsx로 설정되어 있는지 확인해보신 다음, 문제 없다면 tsconfig.json 파일의 내용을 다음과 같이 설정하시기 바랍니다.
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": ["node_modules"]
}이렇게 설정했는데도 동일한 문제가 계속 발생한다면 혀누님의 VSCode가 사용하는 타입스크립트 버전이 잘못되었을 수도 있습니다. 우리 강의에서는 5 버전을 사용하고 있으니 버전도 한번 확인해보시면 좋겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 박혀누님.
컴포넌트를 생성할 때 React가 없습니다라는 TypeScript 오류를 해결하려면, 따로 React를 import 하지 않더라도 오류가 발생하지 않도록 설정할 수 있는 방법이 있습니다.
아래와 같이 TypeScript 설정 파일인 tsconfig.json에 jsx 옵션을 설정하면 됩니다:
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
이렇게 하면 React를 import하지 않아도 됩니다. 그래도 문제가 해결되지 않는다면 직접 React를 import 하는 방법도 있습니다.
강의에서 컴포넌트 생성과 관련된 예를 다루는 부분이 있으니 한 번 참고해보시면 도움이 될 것입니다. 아래 유사한 질문에 대한 답변을 참고하시면 보다 자세한 설명을 확인할 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
버셀로 서버 배포 후 접속 시 500 에러 발생
0
66
2
컴포넌트와 레이아웃
0
55
2
@/styles/globals.css'
0
51
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
71
2
next.js 프로젝트
0
68
1
Next.js + Tanstack Query BFF 구조 질문
1
82
2
Next.js 사전렌더링 이해하기 부분
0
84
2
모달 관련 질문
0
88
3
렌더링 관련 질문
0
108
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
97
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
95
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
107
2
npx prisma db push 시 에러가 뜹니다.
0
131
3
vercel 배포를 실패하였습니다.
0
150
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
93
2
getServerSideProps 함수와 SSR의 관계
0
118
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
93
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
145
2
일반적인 nextjs project architecture에 대하여..
0
120
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
101
2
배포 시 오류 발생
0
112
2
백엔드 서버 오류납니다.
0
107
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
117
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
130
1