Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined...

React에서 컴포넌트를 작성할 때 종종 다음과 같은 compound component를 만들어 모듈화를 시키고 재활용성을 높일 수 있다.

"use client";
import { MyButton } from "@tripie/design-system";
import { useAppTheme } from "@tripie/hooks";

const ThemeButton = () => {
  const { setControl } = useAppTheme();
  return (
    <MyButton onClick={() => setControl("os_default")}>os default</MyButton>
  );
};

const ToggleButton = () => {
  const { mode, toggle } = useAppTheme();
  return (
    <MyButton onClick={toggle}>
      to {mode === "dark" ? "light" : "dark"}
    </MyButton>
  );
};

ThemeButton.Toggle = ToggleButton;

export default ThemeButton;

 

그리고 다음과 같이 컴포넌트를 사용해 줬었다.

import ThemeButton from "../components/ThemeButton";

export default function TestPage() {
  return (
    <div>
      <ThemeButton />
      <ThemeButton.Toggle />
      <h1>this is home</h1>
    </div>
  );
}

 

잘만 쓰던 코드를 nextjs에서 쓰고 있는데 다음과 같은 에러가 발생했다.

 

뭐가 문젤까? 에러를 읽어보자

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: Unsupported Server Component type: undefined

 

리액트 타입이 이상하다는 것. 내장된 컴포넌트로는 string을, composite (합성) 컴포넌트일 경우에는 클래스나 함수여야 하지만 undefined라고 한다. import 방식에 문제가 있을 수 있다고는 하지만, default export로 {} 없이 잘 가져왔으니 작동해야 한다.

 

마지막 줄에서 힌트를 얻었다.

 

Unsupported Server Component type

 

해당 compound component가 서버 컴포넌트인가? 클라이언트 컴포넌트인가?
다시 코드를 살펴보자.

"use client";
import { MyButton } from "@tripie/design-system";
import { useAppTheme } from "@tripie/hooks";

const ThemeButton = () => {
  const { setControl } = useAppTheme();
  return (
  // 유저 상호작용을 통해 테마를 변경할 수 있다.
  // 동적인 상호작용 혹은 state 관리가 수반된다면 클라이언트 사이드 컴포넌트다.
    <MyButton onClick={() => setControl("os_default")}>os default</MyButton>
  );
};

const ToggleButton = () => {
  const { mode, toggle } = useAppTheme();
  return (
    <MyButton onClick={toggle}>
      to {mode === "dark" ? "light" : "dark"}
    </MyButton>
  );
};

ThemeButton.Toggle = ToggleButton;

export default ThemeButton;

 

따라서 사용처에서 "use client"를 추가해 줬더니 잘 돌아간다.

"use client";
import ThemeButton from "../components/ThemeButton";

export default function TestPage() {
  return (
    <div>
      <ThemeButton />
      <ThemeButton.Toggle />
      <h1>this is home</h1>
    </div>
  );
}

🙋 Compound Component는 클라이언트 사이드 컴포넌트다? 

아니다! Compound Component 내에서 유저 상호작용이 있거나 동적으로 state가 관리되어야 하는 경우에는 클라이언트 사이드 컴포넌트지만,  정적인 콘텐츠인 경우나 fetch 된 데이터를 보여주는 것처럼 서버 사이드에 관련된 작업을 수행한다면 서버 쪽 컴포넌트가 된다.

 

서버 컴포넌트로 compound component를 쓰는 예시를 살펴보자.

다음과 같이 text를 렌더 하는 정적 콘텐츠의 compound component를 작성할 수 있다.

const CompositeComponent = () => {
  return <h1>composite component example</h1>;
};

const Option = () => {
  return <h2>hehe i am option!</h2>;
};

CompositeComponent.Option = Option;

export default CompositeComponent;

 

앞서 봤던 버튼을 포함한 compound component과는 달리 정적인 컴포넌트이므로

아래의 사용처에서 "use client"를 포함하지 않아도 에러가 발생하지 않는다.

// "use client";
// import ThemeButton from "../components/ThemeButton";

import CompositeComponent from "../components/CompositeComponents";

export default function Home() {
  return (
    <div>
      {/* <ThemeButton /> */}
      {/* <ThemeButton.Toggle /> */}
      <CompositeComponent />
      <CompositeComponent.Option />
      {/* <h1>this is home</h1> */}
    </div>
  );
}

 

 

🍀 오늘은 compound component를 서버/클라이언트 사이드를 염두하면서 써야 한다는 걸 에러를 통해 알게 되었다.
🤔 리액트와 달리 next에서는 서버와 클라이언트 어느 쪽인지를 더 고민해봐야 하는 것 같다.