`2.4 Shadcn/ui를 소개합니다` 에서 에러가 뜹니다.
104
작성한 질문수 6
강의대로 따라가다가 shadcn을 설치 후 app.tsx에 다음과 같은 경고가 뜹니다.
import "./App.css";
import { Button } from "@/components/ui/button";
function App() {
<div>
<Button>버튼!</Button>
</div>;
}
export default App;
이대로만 따라서 쳤는데 button.tsx에서 [{
"resource": "/Users/minsu/Documents/onbite-exam/src/components/ui/button.tsx",
"owner": "eslint4",
"code": "react-refresh/only-export-components",
"severity": 4,
"message": "Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components.",
"source": "eslint",
"startLineNumber": 62,
"startColumn": 18,
"endLineNumber": 62,
"endColumn": 32,
"modelVersionId": 2
}]라고 에러가 뜹니다.
추가로 index.css에서도 에러가 다음과 같이 뜹니다..
신경 안써도 되는 에러일까요?
소스코드는 구글드라이브로 공유드립니다.
https://drive.google.com/file/d/1gjyp7Io1bA6Tb2hriqhQN8T-jInXo7kY/view?usp=drive_link
답변 2
0
안녕하세요 hinpuo님 이정환입니다.
남겨주신 react-refresh/only-export-components는 말 그대로 “에러”가 아니라 경고 메시지입니다. 그래서 지금 경고가 보이더라도 프로젝트가 깨지거나 버튼이 동작하지 않는 문제가 생기는 것은 아니고, 강의 실습을 진행하는 데도 직접적인 영향은 없습니다.
이 경고가 뜨는 이유를 조금 더 쉽게 설명드리면, 개발 환경에서 React는 코드를 저장할 때마다 화면을 빠르게 갱신해주는 기능(Fast Refresh)을 사용합니다. 이 기능은 보통 파일 하나가 ‘화면에 렌더링되는 React 컴포넌트(예: Button 컴포넌트)만’ 담고 있을 때 가장 안정적으로 동작합니다.
그런데 shadcn/ui의 button.tsx 파일은 버튼 컴포넌트뿐만 아니라, 버튼의 스타일 변형(variant)이나 클래스 조합처럼 컴포넌트 동작을 돕는 상수/함수/설정 값도 같은 파일 안에 함께 들어 있는 형태입니다. 그리고 이 형태는 라이브러리가 이미 정해둔 고정적 형태이므로 우리가 직접 수정하는건 그닥 권장되지는 않죠 ... 🥲
따라서 ESLint가 이 상황을 보고 “Fast Refresh 관점에서 이상적인 형태는 아니지만, 동작 자체가 불가능한 건 아니다”라는 의미로 경고를 띄워주는 것입니다.
0
안녕하세요, 인프런 AI 인턴입니다. hinpuo님.
다음과 같은 문제로 어려움을 겪고 계신 것 같네요:
문제 요약
button.tsx관련 경고: “Fast refresh only works when a file only exports components” 경고는 해당 파일에서 끊임없이 변경이 가능한 기능인 “Fast Refresh”가 활성화되지 않음을 알려주는 것입니다. 이는 일반적으로 한 파일에서 컴포넌트 외에도 다른 상수나 함수들이 존재하는 경우 발생할 수 있습니다.
index.css관련 경고: “Unknown at rule” 경고는 CSS 파일에서 사용되고 있는 특정 규칙들이 해석되지 않음을 나타냅니다. 이는 보통 CSS 전처리기(예: PostCSS)를 사용하는 경우 생길 수 있는 문제입니다.
해결 방법
button.tsx경고 해결:button.tsx파일이 컴포넌트 외에 다른 객체나 함수를 내보내고 있는지를 확인해 보세요. 만약 그런 경우라면, 이를 별도의 파일로 분리하여 상태 관리를 정리할 수 있습니다.
index.css경고 해결:- 사용 중인 CSS 전처리기나 빌드 도구 설정 파일에서 해당 규칙들이 제대로 지원되는지를 확인합니다. 예를 들어,
postcss.config.js나tailwind.config.js에서 사용 중인 규칙이 제대로 설정되어 있는지 검토합니다.
- 사용 중인 CSS 전처리기나 빌드 도구 설정 파일에서 해당 규칙들이 제대로 지원되는지를 확인합니다. 예를 들어,
유사한 질문 및 답변
이와 유사한 문제에 대해 다른 사용자들이 작성한 질문과 답변도 유용할 수 있습니다. 다음 URL에서 관련된 내용을 참고할 수 있습니다:
- “ESLint와 관련된 문제 해결 방법”
- “CSS 전처리기 설정 검토”
해당 링크의 내용을 참고하셔서 문제를 해결하는 데 도움을 받으시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
32
2
6.8 zustand 세션 질문입니다.
0
74
2
next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?
0
60
2
shadcn에서 radix ui와 base ui 차이는 뭔가요?
0
215
2
updateTodo 함수 생성시 화살표 함수 사용 안하는 이유
0
63
2
4.11 바로 투두 삭제가 안됨 질문
0
75
3
매개변수 updatedTodo 관련 질문
0
57
3
인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!
0
73
2
supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!
0
60
2
4.6 id를 string으로 변경시 오류
0
55
2
리액트 타입스크립트 관련 질문있습니다.
0
54
1
소셜 로그인 구현하기 관련하여 질문이 있습니다!
0
88
2
ui 파일 질문드립니다.
0
65
1
tanstack query devtools에서 질문있습니다!
0
58
2
댓글 삭제 시 isPending 질문
0
56
2
두번째 예외상황에 대해 질문있습니다!
0
56
1
리액트 쿼리 질문입니다
0
57
2
개발자도구에서 components 가 안보입니다.
0
81
3
state 관리에 대한 정리
0
70
3
[(2.4) Shadcn/ui를 소개합니다] 강의 Shadcn 세팅 관련 질문 있습니다.
0
150
3
like 테이블에서 왜 create_at이 필요한지 궁금합니다.
0
67
1
삭제가 바로 안되네요ㅠ
0
56
2
access 토큰은 꼭 소셜서버로부터 받아서 사용해야만하나요?!
0
72
2
전역 모달이 여러 개일 경우 모달 프로바이더는 몇 개가 필요한가요?
0
56
1