inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

임폴트가 안됩니다

157

코딩의외로

작성한 질문수 21

0

import React from 'react';
import Counter from './components/Counter';
 // Counter 컴포넌트의 경로를 정확히 입력

function App() {
  return (
    <>
      <Counter />
    </>
  );
}

export default App;

이런 오류가 뜹니다 버전이 달라서일까요?

노드는 최신버전을 쓰고있습니다.

HTML/CSS javascript react node.js chatgpt

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

주신 코드와 이미지 기반으로 확인해보니, 여러 가지 가능성이 있을 것 같습니다.

  1. ‘Counter’ 컴포넌트의 파일 경로가 잘못되었을 수 있습니다. ./components/Counter 경로에 해당 파일이 실제 존재하는지 확인해 보세요. 파일명이나 위치에 오타가 없는지, 대소문자가 정확한지도 체크해야 합니다.

  2. 파일 확장자 문제일 수 있습니다. Counter 컴포넌트의 확장자가 .tsx가 맞는지 확인하세요. 경우에 따라서는 확장자를 명시적으로 작성해 줘야 할 수도 있습니다. 예를 들어, import Counter from './components/Counter.tsx';와 같이 표기합니다.

  3. 프로젝트의 TypeScript 또는 React 버전과 관련된 설정에 문제가 있을 수도 있습니다. tsconfig.json이나 프로젝트 의존성 설정을 확인해 보세요.

  4. IDE의 캐시 오류일 수도 있습니다. IDE를 재시작하거나, 프로젝트 폴더 내의 .ideanode_modules 폴더 및 package-lock.json 파일을 삭제한 후 npm install로 의존성을 다시 설치해 보세요.

노드 버전은 대개 이런 문제와는 직접적인 관련이 없으나, 특정 라이브러리나 프레임워크가 요구하는 버전이 있을 수 있으므로, 문서를 통해 필요한 버전을 확인해 보는 것도 방법입니다.

에러 메시지가 따로 버전 문제를 지적하고 있지 않다면, 경로 혹은 설정 문제일 가능성이 더 높습니다. 상기한 방법들로 문제가 해결되지 않는다면, 추가적인 정보를 제공해 주시면 더 구체적인 답변을 드릴 수 있을 것 같습니다.

파일 디렉토리 구조가 다르네요

0

6

1

클로드 초기설정

0

10

1

슬슬 따라하기가 힘들어진다.

0

39

2

counter01.html은 어디있을까요?

1

9

1

[문의] 섹션 7 미션 진행 중...

0

23

2

수강기간즘연장해주세요

0

15

1

기본 브랜치의 이름이 master에요.

0

29

2

관리자 페이지 질문

0

15

1

plans 생성이 안됩니다.

0

29

3

수업자료 문의

0

21

2

더빙에 어떤 ai가 쓰였는지 궁금합니다.

0

30

2

보안 적용에 대한 강의가 있을까요?

0

20

2

Auto-memory 기능

0

25

2

64강 context 7 관련 질문

0

27

2

css가 화면에 반영이 되지않습니다.

0

166

1

speed.js란 파일자체가 프로젝트에 없습니다!

0

151

1

웹브라우저에서 글만작성하면 에러가 납니다

0

465

1

질문있어요. React 사용자 처리 수업에서

0

144

1

프롬프트 내용은 어디서 볼수있나요?

1

431

2

왜 {import.meta.env.VITE_SOME_KEY} 가 적용이 안될까요 ㅠㅠ

1

715

2

마크다운 이미지가 잘 작동안합니다.

1

578

2

프롬프트 명령어 - 입력값과 동일한 언어로 받으려면 어떻게 작성할까요?

1

465

2

useState 오류

1

822

2

const handleEnter 문에 궁금한게 있습니다.

2

324

2