TLDR: ya dinamik içe aktarma kullanın ya da React 18 alpha kullanın https://github.com/reactwg/react-18/discussions/9

Sorun

Bunun gibi bazı Röle kodunuz varsa:

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>
  );
}

Çözüm

Dinamik İçe Aktarmalar

Bunu düzeltmek için RelayTestDynamicbunun yerine şunları kullanabilirsiniz :

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

Alfa Sürümleri

Alternatif olarak, alfa sürümlerini kullanabilirsiniz reactve react-dom.

yarn add react@alpha react-dom@alpha

TSConfig Hakkında

https://github.com/relay-tools/relay-compiler-language-typescript#typescript şunlardan bahseder:

Ayrıca TypeScript derleyicisini es2015modüllere aktarılacak şekilde yapılandırdığınızdan commonjsve aşağıdaki tsconfig.jsonayarlarla modüllere aktarımı Babel'e kadar bıraktığınızdan emin olun :

Bunu gereksiz buldum. Neden olduğundan emin değil misiniz, Röle kancalarını kullanırken geçerli olmayabilir?

kod işaretçileri

Örnekler için bu depolara göz atın.

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