Replies: 2 comments 3 replies
-
First, there's no RSC support in Remix, so every component is a client component. I understand from your example that what you mean is a component that you export from a Now answering why you get that error, if you want to render a component a component that's only included in the client bundle and not in the server bundle, you need to delay the rendering to the browser, otherwise the component will be undefined during SSR and throw that error. You can do this simply by using ClientOnly component from Remix Utils import { ClientOnly } from "remix-utils/client-only"
<ClientOnly fallback={<SSRFallback />}>
{() => {
<YourComponent />
})
</ClientOnly> The SSRFallback is optional and default to null, which will cause content layout shift after hydration when the component inside is rendered, if that's not an issue you can skip the fallback. If you don't want to install another library you can check the source code of how it works, the basic idea is that on SSR and hydration it renders the fallback, and then it change a state to trigger a new render and now it do render the component. |
Beta Was this translation helpful? Give feedback.
-
If you're using a library in your Remix project that should only render on the client side, you can follow these steps: Rename the filename where you import and use the library to end with .client.tsx. For example, if you have a file named LibraryComponent.tsx, rename it to LibraryComponent.client.tsx. Move the file to a .client directory. If you prefer to keep a cleaner directory structure, create a .client directory and move the LibraryComponent.tsx file inside that directory. Update the imports in any file that references LibraryComponent to reflect the new filename or location of the file. |
Beta Was this translation helpful? Give feedback.
-
What is the official way to use client components in remix.
I found this thread https://stackoverflow.com/questions/75706454/how-to-render-component-only-client-side-with-remix
I keep getting an error
Using this code...
if I remove ExpressCheckoutPay with some text it works fine.
Beta Was this translation helpful? Give feedback.
All reactions