環境

  "dependencies": {
    "@types/node": "20.1.4",
    "autoprefixer": "10.4.14",
    "eslint": "8.40.0",
    "eslint-config-next": "13.4.2",
    "next": "13.4.2",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4"
  },

コード

import UsersList from './UsersList';
import Counter from './Counter';
import { Suspense } from 'react';
const Test = () => {
  return (
    <>
      <h1 className="text-x1 font-bold">Testページ</h1>
      <Counter />
      <Suspense fallback={<p className="mt-4">ユーザデータ Loading...</p>}>
        <UsersList />
      </Suspense>
    </>
  );
};

export default Test;

エラー

UserListにエラーが起きる。

import UsersList from './UsersList';
import Counter from './Counter';
import { Suspense } from 'react';
const Test = () => {
  return (
    <>
      <h1 className="text-x1 font-bold">Testページ</h1>
      <Counter />
      <Suspense fallback={<p className="mt-4">ユーザデータ Loading...</p>}>
        <UsersList />
      </Suspense>
    </>
  );
};

export default Test;

原因

既知のバグ

対処法

{/* @ts-expect-error Async Server Component */}を加える。

import UsersList from './UsersList';
import Counter from './Counter';
import { Suspense } from 'react';
const Test = () => {
  return (
    <>
      <h1 className="text-x1 font-bold">Testページ</h1>
      <Counter />
      <Suspense fallback={<p className="mt-4">ユーザデータ Loading...</p>}>
        {/* @ts-expect-error Async Server Component */}
        <UsersList />
      </Suspense>
    </>
  );
};

export default Test;