`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 git@github.com: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:

[carolineBda]

Hello, we're seeing similar warning in our project (only in dev mode) :

It can be reproduced on this PR :
SocialGouv/code-du-travail-numerique#6078

Run

yarn && yarn build
yarn dev:frontend

Then go to
http://localhost:3000/mentions-legales

[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: