에러 1

<실행결과>

npm start

[에러난 코드]

<index.js>

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
const queryClient = new QueryClient();
root.render(
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>
    <App />
    </BrowserRouter>
    <ReactQueryDevtools initialIsOpen={false} buttonPosition='bottom-right' />
  </QueryClientProvider>
);

<에러문자>
ERROR in ./src/index.js 11:0-49
Module not found: Error: Can't resolve 'react-router-dom' in 'C:\Users\LISA\Desktop\React2002\react01\first\react-query-demo\src'

ERROR in ./src/index.js 18:35-38
export 'default' (imported as 'App') was not found in './App' (module has no exports)

 

<해결 chatgpt>

 

ERROR in ./src/App.js 7:0-34 Module not found: Error: Can't resolve './HomePage' in 'C:\Users\LISA\Desktop\React2002\react01\first\react-query-demo\src' ERROR in ./src/index.js 18:35-38 export 'default' (imported as 'App') was not found in './App' (module has no exports)

좋아 좋아 👍
이제 에러가 완전 명확해졌어. 지금은 “연쇄 오류” 단계야. 하나씩 끊어주면 바로 살아남.

---

❌ 에러 1: HomePage 파일을 못 찾음

에러

 

Module not found: Error: Can't resolve './HomePage'

👉 App.js에서 ./HomePage를 import 했는데

• 파일이 없거나
• 이름이 다르거나
• 경로가 틀림

---

🔍 App.js 7번째 줄 확인

아마 이런 코드 있을 거야:

 

import HomePage from './HomePage';

✅ 해결 방법 (둘 중 하나 선택)

✔ 방법 1: HomePage 파일 만들기 (추천)

src/HomePage.js 파일 생성 후 👇

 

function HomePage() {
  return <div>HomePage</div>;
}

export default HomePage;

---

✔ 방법 2: import 삭제

아직 페이지 안 쓸 거면 App.js에서

 

import HomePage from './HomePage';

이 줄 삭제

 

<App.js>에서
import logo from './logo.svg';
import './App.css';
import { Routes, Route, Link } from "react-router-dom";
import HomePage from "./HomePage";
import ReactQueryPage from "./ReactQueryPage";

import HomePage from "./HomePage"; 삭제

 

<삭제해도 아래처럼 에러가 난다.>
ERROR in ./src/index.js 18:35-38
export 'default' (imported as 'App') was not found in './App' (module has no exports)    

ERROR in [eslint]
src\App.js
  Line 16:35:  'HomePage' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

webpack compiled with 2 errors and 1 warning

 

어쩔 수 없이 src밑에 HomePage.js를 만든다.

 

function HomePage() {
  return <div>HomePage</div>;
}

export default HomePage;

<HomePage.js에 작성한다.>

 

 

 그래도 이런 오류가 난다.

ERROR in ./src/index.js 18:35-38
export 'default' (imported as 'App') was not found in './App' (module has no exports)

webpack compiled with 1 error and 1 warning

<해결>

<App.js>기존꺼에서

import logo from './logo.svg';
import './App.css';
import { Routes, Route, Link } from "react-router-dom";
import HomePage from "./HomePage";
import ReactQueryPage from "./ReactQueryPage";

function App() {
  return (
    <div className="App">
      <nav style={{ backgroundColor: "beige", padding: "20px" }}>
        <Link to="/" style={{ marginRight: "10px" }}>
          HomePage
        </Link>
        <Link to="/react-query">React Query</Link>
      </nav>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/react-query" element={<ReactQueryPage />} />
      </Routes>
    </div>
  );
};

export default App; 이 한줄을 추가한다.

 

참고로

App.js

successfully가 안나와서

// import logo from './logo.svg'; -> 주석처리 하니까 successfully가 나왔다
import './App.css';
import { Routes, Route, Link } from "react-router-dom";
import HomePage from "./HomePage";
import ReactQueryPage from "./ReactQueryPage";

function App() {
  return (
    <div className="App">
      <nav style={{ backgroundColor: "beige", padding: "20px" }}>
        <Link to="/" style={{ marginRight: "10px" }}>
          HomePage
        </Link>
        <Link to="/react-query">React Query</Link>
      </nav>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/react-query" element={<ReactQueryPage />} />
      </Routes>
    </div>
  );
};

export default App;

------------

<ReactQueryPage.jsx> 실행화면 (실행결과) 바로 전의 누나 강의 마지막 코드

import { useQuery } from "@tanstack/react-query";
import React from "react";
import axios from "axios";

const ReactQueryPage = () => {

    const fetchPost = () => {
        return axios.get("http://localhost:3004/posts");
    };
    const { data } = useQuery({
        queryKey : ["posts"],
        queryFn: fetchPost,
    });
    console.log("ddd", data);
    return <div>ReactQueryPag</div>
};

export default ReactQueryPage;

<결과 화면>

 

 

 

 

누르면

 

 

계속 멈추지 않고 에러가 생긴다