search

segmentio / consent-manager

Drop-in consent management plugin for analytics.js
https://segmentio.github.io/consent-manager/
MIT License
341 stars 144 forks source link

Defer adding the container to the DOM until componentDidMount. Fixes consent form display issues #338

Closed shofman closed 1 year ago

shofman commented 1 year ago

In NextJS, if the reactStrictMode is true, appending the container in the constructor does not render the children.

Should fix https://github.com/segmentio/consent-manager/issues/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.

nd4p90x commented 1 year ago

@shofman please update your branch so we can move forward with merging your PR. Thank you.

shofman commented 1 year ago

Hey @nd4p90x - I've updated my branch, but it seems that something has changed with the builds. I see that CircleCI was removed - does the above message still make sense? ci/circleci: build Expected — Waiting for status to be reported.

Let me know if I need to do anything. Otherwise, I'll wait for a maintainer to approve

nd4p90x commented 1 year ago

@shofman all good, we are going away from circleci. Thank you