This repository has been archived by the owner on Apr 3, 2024. It is now read-only.
Defer adding the container to the DOM until componentDidMount. Fixes consent form display issues #338
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In NextJS, if the reactStrictMode is true, appending the container in the constructor does not render the children.
Should fix #303
I have created a playground to showcase the behavior https://github.com/shofman/nextjs-consent-example. Switching the node_module to point to my branch locally fixs the issue.
When reactStrictMode is true in NextJs, we mount and unmount the component multiple times. The timing of this leaves an empty
<div>
on the page without children. This is what prevents the consent form from appearing in NextJS.If we defer attaching the container until
componentDidMount
, React cleans up the div properly and ensures that the children are attached properly (displaying the consent dialog).Disclaimer - I have only tested this in a NextJs context, and not in an ordinary React project.