20.3.4 서버 코드 작성하기

[BrightJun96]

StaticRotuer 가져오기

Error
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

서버를 실행하였을 때 다음과 같은 에러가 계속 발생하여 해결책을 계속 찾아보다
React-router 공식 문서를 참조해보니 StaticRouter를 가져오는 라이브러리가 변경됬다는 것을 알 수 있었습니다.

import { StaticRouter } from "react-router-dom" => import { StaticRouter } from "react-router-dom/server"

Before

import React from "react";
import ReactDOMServer from "react-dom/server";
import express from "express";
import { StaticRouter } from "react-router-dom";
import App from "./App";

const app = express();
// 서버 사이드 렌더링을 처리할 핸들러 함수이다.
//  이 함수는 404가 떠야 하는 상황에 404를 띄우지 않고 서버 사이드 렌더링을 해준다.
const serverRender = (req, res, next) => {
  const context = {};
  const jsx = (
    <StaticRouter location={req.url}>
      <App />;
    </StaticRouter>
  );

  const root = ReactDOMServer.renderToString(jsx); // 렌더링을 하고
  res.send(root); // 클라이언트에게 결과물을 응답한다.
};

// 위 함수를 서버에 적용
app.use(serverRender);

app.listen(5000, () => {
  console.log("Running on http://localhost 5000");
});

After

import React from "react";
import ReactDOMServer from "react-dom/server";
import express from "express";
import { StaticRouter } from "react-router-dom/server"; // react-router-dom/server
import App from "./App";

const app = express();
// 서버 사이드 렌더링을 처리할 핸들러 함수이다.
//  이 함수는 404가 떠야 하는 상황에 404를 띄우지 않고 서버 사이드 렌더링을 해준다.
const serverRender = (req, res, next) => {
  const context = {};
  const jsx = (
    <StaticRouter location={req.url}>
      <App />;
    </StaticRouter>
  );

  const root = ReactDOMServer.renderToString(jsx); // 렌더링을 하고
  res.send(root); // 클라이언트에게 결과물을 응답한다.
};

// 위 함수를 서버에 적용
app.use(serverRender);

app.listen(5000, () => {
  console.log("Running on http://localhost 5000");
});

Conclusion about issue

import { StaticRouter } from "react-router-dom" => import { StaticRouter } from "react-router-dom/server"

react-router v6로 업그레이드 되면서 변경된 사항이었습니다.

저와 같은 이슈를 겪고 있는 분께 도움이 되길 바랍니다.^^

Thank you, velopert!

[dudejrs]

같은 문제로 실습 진행에 어려움을 겪고 잇었는데 덕분에 해결하였습니다. 감사합니다!

[JiyuChoi]

동일한 문제 발생으로 해결책 찾고 있었는데 해결했습니다. 감사합니다 :)

[Phantasia0]

감사합니다! 덕분에 오류 해결했습니다. 커피라도 사드리겠습니다! ㅎㅎ