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

arnaudambro commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

arnaudambro commented 1 month ago

git clone git@github.com:betagouv/zacharie.git
cd ./zacharie
git checkout 59b8832994911b2ce3523f8bee114048a6ddb8d2
yarn install
yarn dev-test-react-dsfr

this should work

garronej commented 1 month ago

I'm not getting the error described:

arnaudambro commented 1 month ago

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 commented 1 month ago

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

carolineBda commented 1 month ago

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

Screenshot from 2024-09-12 15-11-28

It can be reproduced on this PR : https://github.com/SocialGouv/code-du-travail-numerique/pull/6078

Run

yarn && yarn build
yarn dev:frontend

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

garronej commented 1 month ago

Hello @carolineBda,

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

carolineBda commented 1 month ago

ok :+1:

garronej commented 1 month ago

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

arnaudambro commented 1 month ago

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 commented 1 month ago

Yes. I was on the branch.