[Bug]: Next.js 14: Modal window showPreferences does not open after language switch

[spalz]

Expected Behavior

The modal window showPreferences should open correctly after switching the language, both via the data attribute and onClick event.

Current Behavior

After switching the language, the modal window showPreferences does not open, neither via the data attribute nor the onClick event.

Steps to reproduce

Reproducing the error:
https://stackblitz.com/~/github.com/spalz/CookieConsent

Steps to reproduce:

1. Switch the language on the page.
2. Try to open the modal window showPreferences using either the data attribute or the onClick event.
3. Observe that the modal window does not open.å

Proposed fix or additional info.

Stack:

nextjs: "14.x.x"
translate package intl or i18n

Screen.Recording.2024-11-11.at.13.24.36.mov

Version

3.0.1

On which browser do you see the issue?

No response

[orestbida]

The language change causes a full page re-render, and the markup generated by the plugin is being destroyed.

Since this is a vanilla js plugin (and not a react component) you need to be extra careful on how you initialize the plugin.

You need to initialize the plugin on a higher level, so that it does not get re-rendered. Here is a demo. Try navigating between pages, and you'll see that the markup is not destroyed.

[spalz]

@orestbida thanks for the reply! I spent the whole day figuring out how to set it up so that it wouldn’t reset when switching languages.

I actually figured out a solution using provider, and I’ll share it later as an example for Next.js with the app router.

[xInfinitYz]

@orestbida thanks for the reply! I spent the whole day figuring out how to set it up so that it wouldn’t reset when switching languages.

I actually figured out a solution using provider, and I’ll share it later as an example for Next.js with the app router.

Would you mind to share more info?

[andreiwow2]

I also have the same issue, it happens when navigating between pages in nextjs

UPDATE:

what helped for me was to add a cleanup function to the useEffect

return () => {
      CookieConsent.reset();
    }

@xInfinitYz

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.