Bug sur createModal

[Datayama38]

Bonjour,
je viens de détecter un bug sur createModal:
modal.open() ne fonctionne plus sur la dernière version
la console me remonte l'erreur window.dsfr(...) is null
pour info, je n'avais pas le pb lorsque j'étais en 1.12

[ddecrulle]

Bonjour,

Pourriez-vous fournir un exemple minimal reproductible ?
De mon côté, j’ai repris l’exemple du Storybook et je n’ai constaté aucun dysfonctionnement.

[Datayama38]

bonjour,
je viens de tester ce même exemple sur mon projet et j'ai également l'erreur décrite:
https://github.com/betagouv/preuve-covoiturage/tree/main/app-front

[ddecrulle]

Votre projet semble utiliser Next App Router. Dans la documentation, il est précisé :

// NOTE for Next App Router: As long as you avoid using the useIsModalOpen hook and use
// modal.buttonProps instead of modal.open() the Modal component can be used as a
// server component (you can remove "use client";)

Pour pouvoir vous aider davantage, j’ai besoin de pouvoir reproduire le bug facilement.
Pouvez-vous m’indiquer les étapes précises pour reproduire ce comportement sur votre projet, ou bien me fournir un dépôt minimal reproductible ?

[Datayama38]

ok j'essaye de faire ça la semaine prochaine. pour l'instant j'ai rollback en 1.12 et ça fonctionne

[garronej]

Hello @Datayama38,

As @ddecrulle mentioned, I'm not sure how this component could have worked without "use client";.
It's puzzling because using useIsModalOpen inherently requires the component to be client-side.
You'll definitely need "use client"; here.

On another note, you might want to update your setup to align with the latest recommendations:
https://react-dsfr.codegouv.studio/#tab-next.js-app-router

Here's a practical example:
https://github.com/garronej/react-dsfr-next-appdir-demo

I completely understand the frustration—the setup for making components work correctly with the Next.js App Router is indeed painful. Unfortunately, Vercel places intense constraints on library maintainers, especially challenging when integrating a design system not originally created for React.

The essential takeaway is informing react-dsfr explicitly when it's