Bug: renderToStaticMarkup fails with client-side code, suggesting a server-only context limitation

[Thanmaya-Dev]

Description of the bug
When using renderToStaticMarkup to render a React component that contains client-side code (e.g., hooks like useState, event handlers like onClick, or browser-specific APIs), the function throws a runtime error. This behavior occurs even when the component is not actively being used in a browser environment.

To Reproduce
Steps to reproduce the behavior:

Create a simple React functional component that uses useState or useEffect without a dependency on a server-side framework.

Attempt to render this component using ReactDOMServer.renderToStaticMarkup().

The render process will fail with an error similar to "Hooks can only be called inside the body of a function component."

Expected behavior
The renderToStaticMarkup function should either:
a) Gracefully handle client-side code, perhaps by ignoring it or returning an empty string where it would be rendered, or
b) Provide a more explicit and descriptive error message that clearly states it cannot process client-side components.

Actual behavior
The function crashes with an error that is not immediately clear to the developer, suggesting a fundamental conflict between the static rendering process and the component's reliance on client-side state/effects.

Environment

React Version: [e.g., 18.2.0]

Node.js Version: [e.g., 18.12.1]

Browser: Not applicable, as the error occurs during server-side rendering.

Additional context
This limitation makes it difficult to use renderToStaticMarkup for tasks like generating static HTML for email templates or server-side caching if any of the rendered components contain even a small amount of client-specific logic. A clear explanation in the documentation or a more helpful error message would be beneficial.

[gaearon]

Can you provide a minimal runnable example? This sounds like an issue with your bundling or dependency setup (like having two copies of React by mistake).