This code is broken and will cause an error: `Error: You're importing a component that needs to be bundled on the server.` What is the bug?

React JS interview question for Advanced practice.

Answer

ClientComponent is importing ServerData, which is a Server Component, and this is not allowed.

Explanation

A Client Component (ClientComponent.js) cannot import and render a Server Component (ServerData.js). Server Components are not part of the client-side JavaScript bundle. The correct pattern is to have a Server Component parent pass the ServerData component as a prop (e.g., children) to the ClientComponent.

Related Questions