I am facing a very weird problem in NextJS. I using certain react-query hooks will just make the app go white, load forever, and not even log anything.

Example:

src/services/messages.ts

export const useFetchMessagesPublic = (
  interviewId: number,
  devMode?: boolean,
  options?: any
): QueryType<Message[], 'messages'> => {
  const urlSuffix = devMode === true ? 'devmessages' : 'messages';

  const URL = `${NODE_API_URL}/api/interviews/${interviewId}/${urlSuffix}`;

  const query = useQuery(
    ['messages', interviewId],
    async () => {
      return fetchWrapper<Message[]>(URL, null);
    },
    options
  );

  return { ...query, messages: query.data };
};

src/app/chat/[urlCode]/components/MessagesContainer.tsx

I use it like this and this works fine:

const { messages } = useFetchMessagesPublic(interviewId, {
  refetchInterval: 5000,
});

However with this hook:

src/services/interviews.ts

export const useFetchInterviewFromUrlCode = (
  urlCode: string | undefined,
  options?: any
): QueryType<PublicInterview, 'interview'> => {
  const URL = `${NODE_API_URL}/api/interviews/public/${urlCode}`;

  const query = useQuery(
    ['interview', urlCode],
    async () => {
      return fetchWrapper<PublicInterview>(URL, null);
    },
    options
  );

  return { ...query, interview: query.data };
};

used like this

src/app/chat/[urlCode]/components/MessagesContainer.tsx

const { interview } = useFetchInterviewFromUrlCode(urlCode);

will cause the white screen of death.

Another weird thing is that sometimes the solution have been to move the hook to a different component, and then it has just worked. I have also tried to deploy it, and it gives the white screen there as well.

I am using nextjs 13 with the app router.

I am super confused by this, and hope someone here can point me in the right direction.

I have tried a lot of different things, and I expect the app to render, instead of showing the white screen.