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

v4: next.js - Cannot access displayName.toString on the server #987

Open
johnf opened this issue Jul 30, 2024 · 2 comments
Open

v4: next.js - Cannot access displayName.toString on the server #987

johnf opened this issue Jul 30, 2024 · 2 comments
Labels
issue-wipe-pre-v4 If your issue persists in v4, open a new issue & reference this one in the description. v4.1 Issue pertains to version 4.1

Comments

@johnf
Copy link
Contributor

johnf commented Jul 30, 2024

Describe the bug
I'm using a monorepo setup with react-native-web and next.js. I've gone through the v4 setup but I am seeing this error.

⨯ Error: Cannot access displayName.toString on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
    at __webpack_require__ (/home/johnf/work/gladly/mobile/packages/web/.next/server/webpack-runtime.js:33:43)
    at RootLayout (./src/app/layout.tsx:43:97)
    at stringify (<anonymous>)
digest: "2698290890"

My investigation

I tracked down the issue to https://github.com/nativewind/nativewind/blob/main/packages/react-native-css-interop/src/runtime/web/api.ts#L79-L81. Although, I suspect all the displayName references in https://github.com/nativewind/nativewind/blob/main/packages/react-native-css-interop/src/runtime/native/render-component.ts might cause issues if I was using anything Animated/

This change solves my issue

- interopComponent.displayName = `CssInterop.${baseComponent.name ?? "unknown"}`;
  interopComponent.displayName = `CssInterop.${baseComponent.displayName ?? baseComponent.name ?? "unknown"}`;

No idea if this has side effects other than what things are called in devtools.

To Reproduce
Steps to reproduce the behavior:

  • If needed, I can create a repo that replicates the behaviour.

Expected behavior
No error, everything renders fine

Expo Snack
N/A

Screenshots
N/A

Additional context

@danstepanov danstepanov added issue-wipe-pre-v4 If your issue persists in v4, open a new issue & reference this one in the description. v4.1 Issue pertains to version 4.1 needs reproduction https://github.com/nativewind/nativewind/blob/next/contributing.md#opening-an-issue labels Aug 31, 2024
@danstepanov
Copy link
Contributor

@johnf
Copy link
Contributor Author

johnf commented Sep 3, 2024

@danstepanov Check out https://github.com/johnf/nativewind-nextjs for a repro
The main branch is a broken app
The fix branch applies a patch to react-native-css-interop
My fix is purely a workaround I doubt it's the correct approach :)

@danstepanov danstepanov removed the needs reproduction https://github.com/nativewind/nativewind/blob/next/contributing.md#opening-an-issue label Sep 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue-wipe-pre-v4 If your issue persists in v4, open a new issue & reference this one in the description. v4.1 Issue pertains to version 4.1
Projects
None yet
Development

No branches or pull requests

2 participants