Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[React 19] Internal secrets causing issue with SSR in dev mode #31949

Open
LevineLighto opened this issue Jan 1, 2025 · 0 comments
Open

[React 19] Internal secrets causing issue with SSR in dev mode #31949

LevineLighto opened this issue Jan 1, 2025 · 0 comments
Labels

Comments

@LevineLighto
Copy link

LevineLighto commented Jan 1, 2025

In React 19, the internal secret variable was renamed to _DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.
My first question is, why does it need to be prefixed with __CLIENT_INTERNALS and __SERVER_INTERNALS?
This causes an issue with my precompiled component library. I don't give those components "use client" directive because it's an icon library that doesn't need any hook. So, NextJS rendered them on server and this happened
image

I inspected the code of my icon library and found this

import y3 from "react";
...
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
...
    function O() {
      var e = v.A;
      return e === null ? null : e.getOwner();
    }
...
    var f3 = y3, ... v = f3.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ...
...

I noticed the internal secret is named __SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE on server.
server internals

The error was solved when I manually changed the code.

...
    var f3 = y3, ... v = f3.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ...
...

My last question, is there any way to make the compiled code to use server secret if the client secret is not available and vice-versa? I don't want to manually edit the code after compiling them whenever I add new icons in future

Thank you!

PS. The error only happens when I run npm run dev.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant