Question:

How can NextJS use client cannot access <Component> in TypeScript?

Query: How can NextJS use client cannot access <Component> before initialization in TypeScript

Problem

I have what I consider to be a fairly straightforward use case in Nextjs, that is, a NavigationBar component with a search input.

<Image

className="mx-5"

src="images/logomark.svg"

width={100}

height={32}

alt={"logo"}

</Link>

</div>

</div>

However, I recently added a use client; to the top of it in preparation to make it stateful. Immediately it began to throw ReferenceError: Cannot access 'NavigationBar' before initialization.

Using the process of elimination I found the culprit to be <SearchBar />, which was stateful and had use client; in it. If I removed SearchBar, it would render.

I am wondering what within SearchBar was causing this issue, so again I removed everything to try to get it not to error. I removed the use client;, removed all logic, and replaced the return with a simple <div />. It still throws the error.

Updated SearchBar component:

export const SearchBar = () => {

return <div />;

};

At this point it is completely unclear to me what could be causing this issue. I assume there is something related to hydration, perhaps HTML semantics, but it is not clear what or how to debug this.

There is also a runtime stack trace:

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.

Solution

SearchBar.js

'use client'

const SearchBar = () => {

return (

<div>

</div>

);

};

export default SearchBar;

In NavigationBar.js

import SearchBar from './SearchBar'

<Image

className="mx-5"

src="images/logomark.svg"

width={100}

height={32}

alt={"logo"}

</Link>

</div>

</div>

Could you try doing it this way? You seem to have a problem creating and importing. Try "export default SearchBar" and see if your import is correct. I would appreciate it if you let me know if it works or not.

>Narrow SomeType vs SomeType[]

>Create a function that convert a dynamic Json to a formula in Typescript

>How to destroy a custom object within the use Effect hook in TypeScript?

>How to type the values of an object into a spreadsheet in TypeScript?

>Type key of record in a self-referential manner in TypeScript?

>How to get the last cell with data for a given column in TypeScript?

>Ignore requests by interceptors based on request content in TypeScript?

>Create data with Typescript Sequelize model without passing in an id?

>How to delete duplicate names from Array in Typescript?