-
Notifications
You must be signed in to change notification settings - Fork 153
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
SSR problems #210
Comments
A similar problem was also highlighted in an issue at React-accessible-accordion (springload/react-accessible-accordion#41) In their scenario, they solved it with a feature request for resetIds(): springload/react-accessible-accordion#46 , similarly to the solution presented in React-tabs: https://github.com/reactjs/react-tabs#api Don't know if that is plausible, but wanted to share the references in any case |
We're using |
We have a frontity based application and when bumping our versions our production builds started to error out. After much troubleshooting I traced it back to this lib. Pages that depended on this for their SSR were getting errors, but I think the dist version was swallowing them and just throwing out a vague Typescript: Cannot call a class as a function error. Anyways, I pulled this lib did some hacking: Adding the |
I think if add the ability to override |
Hey team, Appreciate your work for React-collapsible. Currently, I'm also facing the same issue. Any solution or a workaround for now? |
@darshantejani007 the workaround for now would be to set your Collapsible to be a dynamic component so it doesn't go through SSR - not ideal but at least you can keep moving. |
Thanks for the prompt reply. The plugin is working perfectly despite the error. It doesn't cause the application to break or something in my case. It's just a console error in the development mode. So I would prefer not to convert it into a dynamic component just yet. |
Hello! |
React 18 added a useId hook for this purpose. I'm using a simple wrapper around Collapsible that looks like: import { useId } from 'react'
import BaseCollapsible, { CollapsibleProps } from 'react-collapsible'
export function Collapsible(props: CollapsibleProps) {
const id = useId()
return (
<BaseCollapsible
{...props}
contentElementId={`collapsible-content-${id}`}
triggerElementProps={{
...props.triggerElementProps,
id: `collapsible-trigger-${id}`,
}}
/>
)
} |
Describe the bug
Differences in generated HTML on server and client cause a warning in Next.js:
Currently it needs to be patched or excluded from server rendering to avoid the issue.
It's expected that this also causes problems with React server renderer in general.
To Reproduce
Use the component with Next.js
Expected behavior
The component could provide a way to override this behaviour for content id similarly to how it's done for trigger id with
triggerElementProps
.Additional context
[email protected]
[email protected]
The text was updated successfully, but these errors were encountered: