TLDR: use importaciones dinámicas o use React 18 alpha https://github.com/reactwg/react-18/discussions/9

El problema

Si tiene algún código de retransmisión como este:

import { Suspense } from "react";
import { graphql } from "relay-runtime";
import { useLazyLoadQuery } from "react-relay";
const RelayTestQuery = graphql`
  query RelayTestQuery {
    viewer {
      id
    }
  }
`;
function RelayTestInner() {
  const data = useLazyLoadQuery(RelayTestQuery, {
    variables: {},
  });
  return <div>hi</div>;
}
export default function RelayTest() {
  return (
    <Suspense fallback={<div>Loading</div>}>
      <RelayTestInner />
    </Suspense>
  );
}

export default function Home() {
  return (
    <RelayEnvironmentProvider environment={RelayEnvironment}>
      <RelayTest />
    </RelayEnvironmentProvider>
  );
}

La solución

Importaciones dinámicas

Para arreglar esto, puedes usar en su RelayTestDynamiclugar:

import dynamic from "next/dynamic";
const RelayTestDynamic = dynamic(() => import("./RelayTest"), {
  ssr: false,
});
export default RelayTestDynamic;

Versiones Alfa

Como alternativa, puede utilizar las versiones alfa de reacty react-dom.

yarn add react@alpha react-dom@alpha

Acerca de TSConfig

https://github.com/relay-tools/relay-compiler-language-typescript#typescriptmenciona lo siguiente:

También asegúrese de configurar el compilador de TypeScript para transpilar a es2015módulos y dejar la transpilación a commonjsmódulos hasta Babel con la siguiente tsconfig.jsonconfiguración:

Encontré que eso era innecesario. No estoy seguro de por qué, ¿tal vez no se aplica al usar ganchos de retransmisión?

Puntos de código

Echa un vistazo a estos repositorios para ver ejemplos.

• https://github.com/arcticmatt/relay-nextjs-typescript
• https://github.com/arcticmatt/relay-nextjs