chore: removes replaceHydrationFunction #2671

langz · 2023-09-21T21:48:29Z

As part of supporting React v18(#2481) replaceHydrationFunction was added to combat some issues related to SSR in our portal. This PR removes this again.

Related ticket: https://jira.tech.dnb.no/browse/EDS-476

vercel · 2023-09-21T21:48:33Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 9, 2024 11:16am

packages/dnb-design-system-portal/gatsby-config.js

packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js

packages/dnb-eufemia/src/shared/Theme.tsx

codesandbox-ci · 2023-09-21T22:04:23Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f1a1808:

Sandbox	Source
eufemia-starter	Configuration

packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js

packages/dnb-design-system-portal/package.json

tujoworker

No more changes than that? Nice 💎

langz · 2023-10-18T13:40:52Z

There seems to be an issue with the logo component in regards to ssr/hydration.
Take a look here: https://eufemia-git-fix-removes-replace-hydration-function-eufemia.vercel.app/uilib/components/logo/demos/?data-visual-test=true&eufemia-theme=sbanken
And open your console:

Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at sa (react-dom.production.min.js:131:278)
    at Ei (react-dom.production.min.js:293:379)
    at ks (react-dom.production.min.js:280:389)
    at ys (react-dom.production.min.js:280:320)
    at gs (react-dom.production.min.js:280:180)
    at as (react-dom.production.min.js:268:209)
    at S (scheduler.production.min.js:13:203)
    at MessagePort.T (scheduler.production.min.js:14:128)
sa @ react-dom.production.min.js:131
Ei @ react-dom.production.min.js:293
ks @ react-dom.production.min.js:280
ys @ react-dom.production.min.js:280
gs @ react-dom.production.min.js:280
as @ react-dom.production.min.js:268
S @ scheduler.production.min.js:13
T @ scheduler.production.min.js:14
react-dom.production.min.js:293 Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Ei (react-dom.production.min.js:293:39)
    at ks (react-dom.production.min.js:280:389)
    at ys (react-dom.production.min.js:280:320)
    at gs (react-dom.production.min.js:280:180)
    at os (react-dom.production.min.js:271:88)
    at as (react-dom.production.min.js:268:429)
    at S (scheduler.production.min.js:13:203)
    at MessagePort.T (scheduler.production.min.js:14:128)

And since the Logo is used in the footer, the hydration issue will happen on all pages with the footer.
Any ideas on how we could/should tackle this problem? @tujoworker 🙏

tujoworker · 2023-10-18T13:42:37Z

Yes, its probably again the useMedia hook. We need to make a fix there!

langz · 2023-10-19T19:58:07Z

Yes, its probably again the useMedia hook. We need to make a fix there!

I think for this specific component Logo, the problem is that when theme is Sbanken, set through queryparam, the 1st load on SSR will result in Logo being DNB logo(because no window available and theme defaults to ui), then on clientside the Logo will of course be Sbanken. So the SVGs in the Logo differ from SSR and clientside when setting theme to Sbanken through query param.

@tujoworker

langz · 2023-10-24T10:59:32Z

packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx

-      code = code.replace(/\s+data-visual-test="[^"]*"/g, '') // remove test data
-      code = code.replace(/ +{\.+visualTestProp.*}\n/g, '') // remove test data
-    }
+


⏰ TODO: I'll probably end up reverting this, or finding a better way of realizing the same as above. ⏰

packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx

packages/dnb-eufemia/src/shared/__tests__/VisibilityByTheme.test.tsx

This PR #2762 was originally merged into #2671 – and was with that never merged into main.

## [10.19.0](v10.18.0...v10.19.0) (2024-01-22) ### 🐛 Bug Fixes * **Autocomplete:** replace existing aria-live handling with the AriaLive component ([#3258](#3258)) ([0ec06ca](0ec06ca)) * **Breadcrumb:** fix rehydration disturbance ([#3254](#3254)) ([dcf3a8b](dcf3a8b)), closes [#2762](#2762) [#2671](#2671) * **DrawerList:** update original data when data prop changes ([#3247](#3247)) ([d1b03c2](d1b03c2)) * **Field:** show error state without error object if parent FieldBlock has error ([#3225](#3225)) ([35fe238](35fe238)), closes [#2958](#2958) * **Flex.Container:** ensure rowGap=false has effect ([#3242](#3242)) ([e18ddfd](e18ddfd)) * **forms:** rename `contents` to `content` ([#3257](#3257)) ([2c9a397](2c9a397)) * **Input:** should not clear input value with escape key ([#3235](#3235)) ([979b3e3](979b3e3)) * **PhoneNumber:** handle pattern, schema and validator with country code ([#3249](#3249)) ([ed115d5](ed115d5)) * **Table.Accordion:** prevent accordion from opening on label click ([#3228](#3228)) ([ee5014f](ee5014f)) * **Textarea:** correct outline to be inset ([#3237](#3237)) ([6433470](6433470)) ### ✨ Features * **AriaLive:** add new component ([#3217](#3217)) ([7c79a54](7c79a54)) * **Flex:** add `line-framed` to divider ([#3244](#3244)) ([1aa3338](1aa3338)), closes [#3242](#3242) [#3245](#3245) * **forms:** add labelDescription prop to fields (`labelSecondary` got removed) ([#3251](#3251)) ([00c278c](00c278c)), closes [#3209](#3209) [#3252](#3252) * **NumberUtils.format:** Only return object if returnAria: true ([#3262](#3262)) ([ca4315f](ca4315f)) * **Section:** add support for backgroundColor=transparent ([#3255](#3255)) ([07e1545](07e1545)) * **Textarea:** add characterCounter ([#3210](#3210)) ([5c9dde9](5c9dde9)), closes [#3217](#3217) * **TextCounter:** add new fragment used in Textarea ([#3250](#3250)) ([3093c28](3093c28)), closes [#3210](#3210)

langz commented Sep 21, 2023

View reviewed changes

packages/dnb-design-system-portal/gatsby-config.js Outdated Show resolved Hide resolved

langz commented Sep 21, 2023

View reviewed changes

packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js Outdated Show resolved Hide resolved

langz commented Sep 21, 2023

View reviewed changes

packages/dnb-eufemia/src/shared/Theme.tsx Outdated Show resolved Hide resolved

langz force-pushed the fix/removes-replace-hydration-function branch 2 times, most recently from 9ede80d to c369e77 Compare September 21, 2023 21:58

vercel bot deployed to Preview September 21, 2023 22:05 View deployment

langz force-pushed the fix/removes-replace-hydration-function branch from c369e77 to 773d8a3 Compare September 26, 2023 13:07

langz marked this pull request as ready for review September 26, 2023 13:08

langz requested a review from tujoworker as a code owner September 26, 2023 13:08

langz commented Sep 26, 2023

View reviewed changes

packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js Outdated Show resolved Hide resolved

vercel bot deployed to Preview September 26, 2023 14:41 View deployment

langz commented Sep 28, 2023

View reviewed changes

packages/dnb-design-system-portal/package.json Outdated Show resolved Hide resolved

vercel bot had a problem deploying to Preview September 28, 2023 07:37 Failure

vercel bot had a problem deploying to Preview September 28, 2023 11:11 Failure

vercel bot had a problem deploying to Preview September 28, 2023 14:11 Failure

langz force-pushed the fix/removes-replace-hydration-function branch 2 times, most recently from d9c9312 to 790d932 Compare September 28, 2023 21:05

vercel bot deployed to Preview September 28, 2023 21:11 View deployment

langz force-pushed the fix/removes-replace-hydration-function branch from 790d932 to e50aac7 Compare September 29, 2023 10:38

vercel bot deployed to Preview September 29, 2023 10:44 View deployment

tujoworker approved these changes Sep 29, 2023

View reviewed changes

langz force-pushed the fix/removes-replace-hydration-function branch from e50aac7 to 1b00764 Compare September 29, 2023 21:40

vercel bot deployed to Preview September 29, 2023 21:51 View deployment

langz force-pushed the fix/removes-replace-hydration-function branch from 1b00764 to 0c8accb Compare October 1, 2023 20:38

vercel bot deployed to Preview October 1, 2023 20:44 View deployment

langz force-pushed the fix/removes-replace-hydration-function branch from 0c8accb to 26a0ccf Compare October 2, 2023 07:44

vercel bot deployed to Preview October 2, 2023 08:00 View deployment

langz force-pushed the fix/removes-replace-hydration-function branch from 26a0ccf to 556a13e Compare October 2, 2023 21:18

langz force-pushed the fix/removes-replace-hydration-function branch from c956af0 to 15ad705 Compare October 18, 2023 11:15

vercel bot deployed to Preview October 18, 2023 11:36 View deployment

vercel bot deployed to Preview October 18, 2023 12:34 View deployment

vercel bot deployed to Preview October 18, 2023 13:35 View deployment

langz force-pushed the fix/removes-replace-hydration-function branch from 0dae141 to b9a24d7 Compare October 20, 2023 12:28

vercel bot deployed to Preview October 20, 2023 12:34 View deployment

langz force-pushed the fix/removes-replace-hydration-function branch from b9a24d7 to b65950f Compare October 24, 2023 07:40

vercel bot deployed to Preview October 24, 2023 07:54 View deployment

langz mentioned this pull request Oct 24, 2023

chore: move data-visual-test to ComponentBox #2789

Closed

langz commented Oct 24, 2023

View reviewed changes

vercel bot deployed to Preview October 24, 2023 11:00 View deployment

langz force-pushed the fix/removes-replace-hydration-function branch from 40c8ef8 to 25df6fd Compare October 24, 2023 12:09

vercel bot deployed to Preview October 24, 2023 12:22 View deployment

langz force-pushed the fix/removes-replace-hydration-function branch from 3bb6635 to 4a6b9dc Compare October 24, 2023 13:37

langz commented Oct 24, 2023

View reviewed changes

packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx Outdated Show resolved Hide resolved

langz commented Oct 24, 2023

View reviewed changes

packages/dnb-eufemia/src/shared/__tests__/VisibilityByTheme.test.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview October 24, 2023 13:45 View deployment

langz force-pushed the fix/removes-replace-hydration-function branch from 4a6b9dc to 3343e01 Compare October 25, 2023 10:54

vercel bot deployed to Preview October 25, 2023 11:00 View deployment

vercel bot deployed to Preview October 25, 2023 12:01 View deployment

vercel bot deployed to Preview October 25, 2023 12:38 View deployment

chore: removes replaceHydrationFunction

f1a1808

tujoworker force-pushed the fix/removes-replace-hydration-function branch from 78688c6 to f1a1808 Compare January 9, 2024 10:56

vercel bot deployed to Preview January 9, 2024 11:16 View deployment

tujoworker mentioned this pull request Jan 21, 2024

fix(Breadcrumb): fix rehydration disturbance #3254

Merged

tujoworker added a commit that referenced this pull request Jan 22, 2024

fix(Breadcrumb): fix rehydration disturbance (#3254)

dcf3a8b

This PR #2762 was originally merged into #2671 – and was with that never merged into main.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: removes replaceHydrationFunction #2671

chore: removes replaceHydrationFunction #2671

langz commented Sep 21, 2023 •

edited

vercel bot commented Sep 21, 2023 •

edited

codesandbox-ci bot commented Sep 21, 2023 •

edited

tujoworker left a comment

langz commented Oct 18, 2023 •

edited

tujoworker commented Oct 18, 2023

langz commented Oct 19, 2023 •

edited

langz Oct 24, 2023 •

edited

chore: removes replaceHydrationFunction #2671

Are you sure you want to change the base?

chore: removes replaceHydrationFunction #2671

Conversation

langz commented Sep 21, 2023 • edited

vercel bot commented Sep 21, 2023 • edited

codesandbox-ci bot commented Sep 21, 2023 • edited

tujoworker left a comment

Choose a reason for hiding this comment

langz commented Oct 18, 2023 • edited

tujoworker commented Oct 18, 2023

langz commented Oct 19, 2023 • edited

langz Oct 24, 2023 • edited

Choose a reason for hiding this comment

langz commented Sep 21, 2023 •

edited

vercel bot commented Sep 21, 2023 •

edited

codesandbox-ci bot commented Sep 21, 2023 •

edited

langz commented Oct 18, 2023 •

edited

langz commented Oct 19, 2023 •

edited

langz Oct 24, 2023 •

edited