reactjs - Nextjs use client kan inte komma åt <Component> före initialisering

Jag har det jag anser vara ett ganska enkelt användningsfall i Nextjs, det vill säga en NavigationBar-komponent med ett sökfält.

<div className="w-full flex flex-row items-center py-5 justify-between">
    <div className="w-40">
      <Link href="/">
        <Image
          className="mx-5"
          src="images/logomark.svg"
          width={100}
          height={32}
          alt={"logo"}
        />
      </Link>
    </div>
    <SearchBar />
</div>

Men jag lade nyligen till use client; högst upp i den i förberedelse för att göra den stateful. Omedelbart började den kasta ReferenceError: Cannot access 'NavigationBar' before initialization.

Genom att använda uteslutningsmetoden hittade jag boven till att vara <SearchBar />, som var stateful och hade use client; i sig. Om jag tog bort SearchBar skulle det renderas.

Jag undrar vad i SearchBar som orsakat detta problem, så jag tog bort allt igen för att försöka förhindra att det blir ett fel. Jag tog bort use client;, tog bort all logik och ersatte returvärdet med en enkel <div />. Det ger fortfarande samma fel.

Uppdaterad SearchBar-komponent:

export const SearchBar = () => {
  return <div />;
};

Vid det här laget är det helt oklart för mig vad som skulle kunna orsaka detta problem. Jag antar att det finns något relaterat till hydrering, kanske HTML-semantik, men det är inte klart vad eller hur man felsöker detta.

Det finns också en körningstackspårning:

Uncaught (in promise) ReferenceError: Cannot access 'NavigationBar' before initialization

Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

The above error occurred in the <NotFoundErrorBoundary> component:

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Svar #1

SearchBar.js

'use client'
const SearchBar = () => {
  return (
    <div>
    </div>
  );
};

export default SearchBar;

i NavigationBar.js

import SearchBar from './SearchBar'
<div className="w-full flex flex-row items-center py-5 justify-between">
    <div className="w-40">
      <Link href="/">
        <Image
          className="mx-5"
          src="images/logomark.svg"
          width={100}
          height={32}
          alt={"logo"}
        />
      </Link>
    </div>
    <SearchBar />
</div>

Kan du försöka göra det på det här sättet? Det verkar som att du har problem med att skapa och importera. Prova "export default SearchBar" och se om din import är korrekt. Jag skulle uppskatta om du låter mig veta om det fungerar eller inte.