Extra attributes from the server: data-fr-js-modal-button

[arnaudambro]

Hello

I've this warning using react-dsfr in my Remix project (here: https://github.com/betagouv/zacharie/tree/24f0594140d20aa8d93f271947c8dd62fdb83112)

I have no clue how to try and fix it...

Warning: Extra attributes from the server: data-fr-js-modal-button
    at button
    at http://localhost:3232/node_modules/.vite/deps/chunk-EIDWZ6ND.js?v=628cc138:41:15
    at fr-theme-modal-modal
    at Display (http://localhost:3232/node_modules/.vite/deps/@codegouvfr_react-dsfr_Header.js?v=628cc138:426:17)
    at http://localhost:3232/node_modules/.vite/deps/@codegouvfr_react-dsfr_Header.js?v=628cc138:752:11
    at TableauDeBordLayout (http://localhost:3232/app/routes/tableau-de-bord.tsx:9:18)
    at RenderedRoute (http://localhost:3232/node_modules/.vite/deps/chunk-7GTNRECA.js?v=628cc138:401:5)
    at Outlet (http://localhost:3232/node_modules/.vite/deps/chunk-7GTNRECA.js?v=628cc138:739:26)
    at HoneypotProvider (http://localhost:3232/node_modules/.vite/deps/remix-utils_honeypot_react.js?v=628cc138:27:29)
    at App (http://localhost:3232/app/root.tsx:199:7)
    at body
    at html
    at Layout (http://localhost:3232/app/root.tsx:31:3)
    at RenderedRoute (http://localhost:3232/node_modules/.vite/deps/chunk-7GTNRECA.js?v=628cc138:401:5)
    at RenderErrorBoundary (http://localhost:3232/node_modules/.vite/deps/chunk-7GTNRECA.js?v=628cc138:361:5)
    at DataRoutes (http://localhost:3232/node_modules/.vite/deps/chunk-7GTNRECA.js?v=628cc138:1394:5)
    at Router (http://localhost:3232/node_modules/.vite/deps/chunk-7GTNRECA.js?v=628cc138:746:15)
    at RouterProvider (http://localhost:3232/node_modules/.vite/deps/chunk-7GTNRECA.js?v=628cc138:1209:5)
    at RemixErrorBoundary (http://localhost:3232/node_modules/.vite/deps/chunk-7GTNRECA.js?v=628cc138:2757:5)
    at RemixBrowser (http://localhost:3232/node_modules/.vite/deps/chunk-7GTNRECA.js?v=628cc138:4294:46)

[garronej]

Hello @arnaudambro,

Assuming you're using the components exposed by react-dsfr, this error is very strange.

This attribute is added dynamically by the JavaScript code of @gouvfr/dsfr. This code isn't loaded on the backend during SSR. It cannot possibly be. If it was many errors would be thrown.

If you can produce a reproduction repo with precise steps to reproduce I'll be able to debug.

[arnaudambro]

If you can produce a reproduction repo with precise steps to reproduce I'll be able to debug.

this is the repo I'm working on, with the code as is https://github.com/betagouv/zacharie/tree/24f0594140d20aa8d93f271947c8dd62fdb83112

the file your might be interested in is ./app/entry.client.tsx I think

[garronej]

Please provide the exact commands to reproduce and where I should navigate to reproduce the error.

[arnaudambro]

git clone [email protected]:betagouv/zacharie.git
cd ./zacharie
git checkout 59b8832994911b2ce3523f8bee114048a6ddb8d2
yarn install
yarn dev-test-react-dsfr

this should work

[garronej]

I'm not getting the error described:

[arnaudambro]

mmm yes, my bad, it's once you're logged in

then on the url http://localhost:3232/tableau-de-bord

if you remove everything except the header in ./app/tableau-de-bord.tsx you still get the error

import { Header } from "@codegouvfr/react-dsfr/Header";

export default function TableauDeBordLayout() {
  return (
    <>
      <Header
        brandTop={
          <>
            Ministère
            <br />
            de l'Agriculture
          </>
        }
        homeLinkProps={{
          href: "/",
          title: "Zacharie - Ministère de l'Agriculture",
        }}
        id="fr-header-header-with-quick-access-items"
        serviceTagline="La Fiche d’Examen Initial (FEI) simplifiée"
        serviceTitle="Zacharie"
      />
    </>
  );
}

I made a branch for this test: https://github.com/betagouv/zacharie/tree/test--warning-dsfr

[garronej]

I still don't see the error you're refering to in this issue:

[garronej]

Hello @carolineBda,

This is not the same error and not the same meta framwork. Please open a new issue.

[carolineBda]

ok 👍

[garronej]

@carolineBda and unfortunatly, I can't reproduce either:

[arnaudambro]

I still don't see the error you're refering to in this issue:

are you sure you're on the branch ? https://github.com/betagouv/zacharie/tree/test--warning-dsfr
cause the error shows you need a postgres db but in that branch I removed the dependency to this - and it works fine on my computer

[garronej]

Yes. I was on the branch.

I'll try again after your update

[garronej]

Still can reproduce, neither with chrome or firefox, neither with network throtling.

The error I'm getting is:

I can look at this but this isn't the same error you're refering to, it's related to Remix Link component.

Maybe produce a dump of the error with https://www.replay.io/ ?

[garronej]

Maybe try clearing your browser cache as well.

It's maybe due to the fact that you've done this:

[arnaudambro]

still here...

sorry I have no time right now to dig in a little bit more, but in October/November I think I'll be able to

Thanks anyway, great job done there !

[lutangar]

This error appears when the lang attribute is set on the <DsfrProvider /> component and when using Next.js App router :

Here is a minimum layout to reproduce the error :

app/layout.tsx

import { type PropsWithChildren } from 'react';
import { DsfrProvider } from '@codegouvfr/react-dsfr/next-appdir/DsfrProvider';
import { getHtmlAttributes } from '@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes';
import { StartDsfr } from '@/components/StartDsfr';

const RootLayout = ({ children }: PropsWithChildren) => {
  return (
    <html lang="fr" {...getHtmlAttributes({ defaultColorScheme: 'light', lang: 'fr' })}>
      <head>
        <StartDsfr />
      </head>
      <body>
        <DsfrProvider lang="fr">{children}</DsfrProvider>
      </body>
    </html>
  );
};

export default RootLayout;

For the <StartDsfr /> component see :
https://react-dsfr.codegouv.studio/routing

[garronej]

Hello @lutangar, I doubt that is the root cause of the issue.

Here again I can't reproduce, I tried with the Next App Router Starter.

I'm down to fix whatever as long as you can provide me a reproduction path.

PS: getHtmlAttributes already sets the lang property so having lang="fr" {...getHtmlAttributes({ lang: 'fr' })} is redundant.