Array passed as prop to client component empty in production

Question

In my page.tsx, I am making a prisma call and getting data from a json file using fs. I am then attempting to pass these values down to my client component as props. In development this all works perfectly. but when I deploy it and navigate to the page, the console logs for the array all show an empty array. I'm not sure what is causing this, the only things I could think of are that my pages are now generated dynamically because I am using searchparams.

//page.tsx
export default async function Classic({ searchParams }: ClassicProps) {
  const pokedex = await readJson("/data/pokedex.json");
  const dailies = await prisma.daily.findUnique({
    where: {
      date: startOfToday(),
    },
  });

  return (
    <>
      <ModeSwitch href="/classic" searchParams={searchParams} />
      <Guesses />
      {dailies && <GameWrapper pokedex={pokedex} dailies={dailies} />}
    </>
  );
}

//relevant Client Component Code
export default function GameWrapper({ pokedex, dailies }: GameWrapperProps) {
  useHydrateAtoms([[pokedexAtom, pokedex]]);
  const pokedexer = pokedex;
  console.log("Pokedex 1st call:",pokedex)
  useHydrateAtoms([[dailyAtom, dailies]]);
  const [mode, setMode] = useAtom(currentGameMode);
  const pokedexy = useAtomValue(pokedexAtom);
  const { classicId, whosThatPokemonId } = dailies;
  const setDailyPokemon = useSetAtom(dailyPokemonAtom);
  const gameOver = useAtomValue(gameOverAtom);

  const currentPath = usePathname();
  const searchParams = useSearchParams();

  const targetDate = startOfTomorrow();
  const setNewGame = useSetAtom(newGameAtom);

  useEffect(() => {
    if (currentPath === "/classic") {
      if (searchParams.get("mode") === "unlimited") setMode("classicUnlimited");
      else setMode("classic");
    } else if (currentPath === "/whosthatpokemon") {
      if (searchParams.get("mode") === "unlimited")
        setMode("whosthatpokemonUnlimited");
      else setMode("whosthatpokemon");
    }
  }, [currentPath, searchParams, setMode]);

  useEffect(() => {
    console.log("Set Dailies useEffect is running");
    console.log("Pokedex 2nd call:",pokedex)
    console.log("Pokedexy:",pokedexy)
    console.log("Pokedexer:",pokedexer)
    function setDailies() {
      console.log("Pokemon Ids:",classicId, whosThatPokemonId)
      const dailyClassicPokemon = pokedex.find(
        (pokemon) => pokemon.id === classicId,
      );
      console.log("Daily Classic Pokemon:",dailyClassicPokemon)
      const dailyWhosThatPokemon = pokedex.find(
        (pokemon) => pokemon.id === whosThatPokemonId,
      );
      console.log("Daily WTP Pokemon:",dailyWhosThatPokemon)
      if (!dailyWhosThatPokemon) throw new Error("Daily WTP Pokemon Not Found");
      if (!dailyClassicPokemon) throw new Error("Daily Classic Pokemon Not Found");

      setDailyPokemon((prev) => ({
        ...prev,
        whosthatpokemon: dailyWhosThatPokemon,
        classic: dailyClassicPokemon,
      }));
    }
    setDailies();
  }, [classicId, pokedex, setDailyPokemon, whosThatPokemonId]);
}

Masai Lion · Answer

Here is the fs function if it helps clarify thingsimport type { Pokemon } from "@/atoms/GameAtoms";
import { promises as fs } from "fs";

export async function readJson(path: string): Promise<Pokemon[]> {
  try {
    const fullPath = process.cwd() + "/src" + path;
    const data = await fs.readFile(fullPath, "utf8");
    return JSON.parse(data);
  } catch (error) {
    console.error(error);
    return [];
  }
}

Array passed as prop to client component empty in production

1 Reply