Footer: fix hydration error with the locale dropdown #1210

vmarta · 2023-05-16T20:12:44Z

It looks like there's a bug with chakra-enhanced <option> where the selected property is no longer set. That's why there's a mismatch between the client and server rendered html.

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

(change1)

How to Test-Drive This PR

(step1)

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

It looks like there's a bug with chakra-enhanced <option> where the `selected` property is no longer set. That's why there's a mismatch between the client and server rendered html.

vmarta · 2023-05-16T20:31:45Z

packages/template-retail-react-app/app/components/locale-text/index.jsx


-const LocaleText = ({shortCode, as, ...otherProps}) => {
+const LocaleText = ({shortCode}) => {


Simplified this component, so it now returns the text without any wrapper.

vmarta · 2023-05-16T20:33:19Z

packages/template-retail-react-app/app/theme/components/project/footer.js

@@ -62,9 +62,6 @@ export default {
                background: 'whiteAlpha.500'
            }
        },
-        localeDropdownOption: {
-            color: 'black'


Had to do delete this theme property, because now we have to use native <option>.. and not the chakra-enhanced version that can accept style / theme props.

adamraya

I still see the Uncaught hydration errors on hard refresh:

react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:1)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:1)
    at updateHostComponent (react-dom.development.js:19902:1)
    at beginWork (react-dom.development.js:21618:1)

STR

Checkout fix-footer-hydration-error branch.
git clean -dxf && npm ci
npm start --prefix packages/template-retail-react-app
Load any page e.g. http://localhost:3000/global/en-GB/category/womens
Hard refresh. Observe the Uncaught hydration errors in the browser console.

packages/template-retail-react-app/app/components/footer/index.jsx

bfeister

Great work figuring out the hydration error 🏅

I don't think we want to allow any style strings like style={{color: 'black'}} in the template, that is very much opposed to Template Extensibility and the template being a framework that can be extended.

We can put it in constants.js if no one has a better suggestion, but let's not ship with this antipattern

vmarta · 2023-05-17T22:08:07Z

@bfeister To address your concern, I've refactored the solution so that it still uses the theme styling.

* develop: (37 commits) [Phased Launch] Call Session bridge after login (#1220) [v3] Add multi-site suffix to auth token keys (#1208) Footer: fix hydration error with the locale dropdown (#1210) remove unused peerDependency @chakra-ui/system (#1212) @W-12582733: Expose env vars endpoint for E2E smoke tests (#1207) Upgrade to React 18 (#1166) Remove v3 branch name related actions (#1206) add test to reach test coverage threshold remove commerce-api folder Feature: Extract einstein RefArch-specific values to constant (#1200) Bump version number to 2.7.1 and update changelogs (#1197) store usid in cookies (#1193) make sure static files are copied on dev environment (#1196) [WIP] PWA Kit 2.7.1 release (#1181) [V2] Internal lib build typescript dev dependency (#1194) [V2] Re-generate lock files and fix hook lib tests (#1186) [v3] Add Convenience Components (#1183) Update commerce-sdk-react README (#1176) Add additional properties to ShopperLogin test types (#1185) Fix missing commerce-sdk-react logout call (#1180) ... # Conflicts: # package-lock.json # packages/commerce-sdk-react/CHANGELOG.md # packages/commerce-sdk-react/package-lock.json # packages/internal-lib-build/package-lock.json # packages/pwa-kit-create-app/package-lock.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-react-sdk/package-lock.json # packages/pwa-kit-runtime/package-lock.json # packages/template-mrt-reference-app/package-lock.json # packages/template-retail-react-app/package-lock.json # packages/template-typescript-minimal/package-lock.json # packages/test-commerce-sdk-react/package-lock.json

* develop: (34 commits) [Phased Launch] Call Session bridge after login (#1220) [v3] Add multi-site suffix to auth token keys (#1208) Footer: fix hydration error with the locale dropdown (#1210) remove unused peerDependency @chakra-ui/system (#1212) @W-12582733: Expose env vars endpoint for E2E smoke tests (#1207) Upgrade to React 18 (#1166) Remove v3 branch name related actions (#1206) add test to reach test coverage threshold remove commerce-api folder Feature: Extract einstein RefArch-specific values to constant (#1200) Bump version number to 2.7.1 and update changelogs (#1197) store usid in cookies (#1193) make sure static files are copied on dev environment (#1196) [WIP] PWA Kit 2.7.1 release (#1181) [V2] Internal lib build typescript dev dependency (#1194) [V2] Re-generate lock files and fix hook lib tests (#1186) Add additional properties to ShopperLogin test types (#1185) Revert 2.7.0 branch to prep for 2.7.1 changes (#1182) #1174 Replace invalid value for wrap property (#1179) Add a redirect to login page after user signs out from checkout page (#1172) ... # Conflicts: # package-lock.json # packages/commerce-sdk-react/CHANGELOG.md # packages/commerce-sdk-react/package-lock.json # packages/internal-lib-build/package-lock.json # packages/pwa-kit-create-app/package-lock.json # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-dev/package.json # packages/pwa-kit-react-sdk/package-lock.json # packages/pwa-kit-runtime/package-lock.json # packages/template-mrt-reference-app/package-lock.json # packages/template-retail-react-app/app/components/confirmation-modal/index.test.js # packages/template-retail-react-app/app/components/footer/index.jsx # packages/template-retail-react-app/app/components/header/index.jsx # packages/template-retail-react-app/app/components/list-menu/index.test.js # packages/template-retail-react-app/app/components/product-scroller/index.test.js # packages/template-retail-react-app/app/components/product-view-modal/index.test.js # packages/template-retail-react-app/app/components/search/index.test.js # packages/template-retail-react-app/app/hoc/with-registration/index.test.js # packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.js # packages/template-retail-react-app/app/hooks/use-auth-modal.test.js # packages/template-retail-react-app/app/hooks/use-currency.test.js # packages/template-retail-react-app/app/hooks/use-multi-site.test.js # packages/template-retail-react-app/app/hooks/use-navigation.test.js # packages/template-retail-react-app/app/pages/account/addresses.test.js # packages/template-retail-react-app/app/pages/account/index.jsx # packages/template-retail-react-app/app/pages/account/wishlist/partials/wishlist-primary-action.test.js # packages/template-retail-react-app/app/pages/cart/index.test.js # packages/template-retail-react-app/app/pages/cart/partials/cart-secondary-button-group.test.js # packages/template-retail-react-app/app/pages/checkout/index.test.js # packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx # packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js # packages/template-retail-react-app/app/pages/home/index.test.js # packages/template-retail-react-app/app/pages/product-list/partials/empty-results.jsx # packages/template-retail-react-app/app/pages/product-list/partials/page-header.jsx # packages/template-retail-react-app/app/pages/registration/index.test.jsx # packages/template-retail-react-app/app/utils/site-utils.js # packages/template-retail-react-app/package-lock.json # packages/template-typescript-minimal/package-lock.json # packages/test-commerce-sdk-react/package-lock.json

@bendvc

…react-app * feature/template-extensibility: (38 commits) support windows file paths Feature/template extensibility (#1162) lockfiles from reaact18 / chakra2 remove demo extensible app in light of soon-to-be-merged PR from @bendvc [Phased Launch] Call Session bridge after login (#1220) [v3] Add multi-site suffix to auth token keys (#1208) Footer: fix hydration error with the locale dropdown (#1210) remove unused peerDependency @chakra-ui/system (#1212) @W-12582733: Expose env vars endpoint for E2E smoke tests (#1207) Upgrade to React 18 (#1166) Remove v3 branch name related actions (#1206) add test to reach test coverage threshold remove commerce-api folder Feature: Extract einstein RefArch-specific values to constant (#1200) Bump version number to 2.7.1 and update changelogs (#1197) store usid in cookies (#1193) make sure static files are copied on dev environment (#1196) [WIP] PWA Kit 2.7.1 release (#1181) [V2] Internal lib build typescript dev dependency (#1194) [V2] Re-generate lock files and fix hook lib tests (#1186) ... # Conflicts: # packages/my-extended-retail-app/config/default.js # packages/my-extended-retail-app/config/sites.js # packages/my-extended-retail-app/package-lock.json # packages/my-extended-retail-app/package.json # packages/my-extended-retail-app/pwa-kit-overrides/app/assets/svg/brand-logo.svg # packages/my-extended-retail-app/pwa-kit-overrides/app/components/_app-config/index.jsx # packages/my-extended-retail-app/pwa-kit-overrides/app/components/_app/index.jsx # packages/my-extended-retail-app/pwa-kit-overrides/app/pages/home/index.jsx # packages/my-extended-retail-app/pwa-kit-overrides/app/routes.jsx # packages/my-extended-retail-app/pwa-kit-overrides/app/ssr.js # packages/my-extended-retail-app/pwa-kit-overrides/app/static/ico/favicon.ico # packages/my-extended-retail-app/pwa-kit-overrides/app/static/img/global/app-icon-192.png # packages/my-extended-retail-app/pwa-kit-overrides/app/static/img/global/app-icon-512.png # packages/my-extended-retail-app/pwa-kit-overrides/app/static/img/global/apple-touch-icon.png # packages/pwa-kit-dev/bin/pwa-kit-dev.js # packages/pwa-kit-dev/package-lock.json # packages/pwa-kit-dev/package.json # packages/pwa-kit-dev/src/configs/webpack/config.js # packages/template-retail-react-app/app/components/confirmation-modal/index.test.js # packages/template-retail-react-app/app/components/footer/index.jsx # packages/template-retail-react-app/app/components/header/index.jsx # packages/template-retail-react-app/app/components/list-menu/index.test.js # packages/template-retail-react-app/app/components/product-scroller/index.test.js # packages/template-retail-react-app/app/components/product-view-modal/index.test.js # packages/template-retail-react-app/app/components/search/index.test.js # packages/template-retail-react-app/app/hoc/with-registration/index.test.js # packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.js # packages/template-retail-react-app/app/hooks/use-auth-modal.test.js # packages/template-retail-react-app/app/hooks/use-currency.test.js # packages/template-retail-react-app/app/hooks/use-multi-site.test.js # packages/template-retail-react-app/app/hooks/use-navigation.test.js # packages/template-retail-react-app/app/pages/account/addresses.test.js # packages/template-retail-react-app/app/pages/account/index.jsx # packages/template-retail-react-app/app/pages/account/wishlist/index.test.js # packages/template-retail-react-app/app/pages/account/wishlist/partials/wishlist-primary-action.test.js # packages/template-retail-react-app/app/pages/cart/index.test.js # packages/template-retail-react-app/app/pages/cart/partials/cart-secondary-button-group.test.js # packages/template-retail-react-app/app/pages/checkout/index.test.js # packages/template-retail-react-app/app/pages/checkout/partials/contact-info.jsx # packages/template-retail-react-app/app/pages/checkout/partials/contact-info.test.js # packages/template-retail-react-app/app/pages/home/index.test.js # packages/template-retail-react-app/app/pages/product-list/partials/empty-results.jsx # packages/template-retail-react-app/app/pages/product-list/partials/page-header.jsx # packages/template-retail-react-app/app/pages/registration/index.test.jsx # packages/template-retail-react-app/app/utils/site-utils.js # packages/template-retail-react-app/package-lock.json # packages/template-retail-react-app/package.json

vmarta added 3 commits May 16, 2023 13:11

Footer: fix hydration error with the locale dropdown

df4b067

It looks like there's a bug with chakra-enhanced <option> where the `selected` property is no longer set. That's why there's a mismatch between the client and server rendered html.

Add comment

82a7d33

Update index.test.js

2523719

vmarta commented May 16, 2023

View reviewed changes

vmarta marked this pull request as ready for review May 16, 2023 20:36

vmarta requested a review from a team as a code owner May 16, 2023 20:36

alexvuong previously approved these changes May 16, 2023

View reviewed changes

vmarta requested a review from adamraya May 16, 2023 21:50

adamraya reviewed May 16, 2023

View reviewed changes

bfeister reviewed May 17, 2023

View reviewed changes

packages/template-retail-react-app/app/components/footer/index.jsx Outdated Show resolved Hide resolved

bfeister requested changes May 17, 2023

View reviewed changes

Refactor so that we still use theme styles

81ba7a1

vmarta dismissed alexvuong’s stale review via 81ba7a1 May 17, 2023 22:04

Merge branch 'develop' into fix-footer-hydration-error

a0acc23

bfeister approved these changes May 17, 2023

View reviewed changes

adamraya approved these changes May 17, 2023

View reviewed changes

vmarta merged commit 404e46f into develop May 18, 2023

vmarta deleted the fix-footer-hydration-error branch May 18, 2023 04:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Footer: fix hydration error with the locale dropdown #1210

Footer: fix hydration error with the locale dropdown #1210

vmarta commented May 16, 2023 •

edited

Loading

vmarta May 16, 2023

vmarta May 16, 2023

adamraya left a comment •

edited

Loading

bfeister left a comment

vmarta commented May 17, 2023


		const LocaleText = ({shortCode, as, ...otherProps}) => {
		const LocaleText = ({shortCode}) => {

Footer: fix hydration error with the locale dropdown #1210

Footer: fix hydration error with the locale dropdown #1210

Conversation

vmarta commented May 16, 2023 • edited Loading

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

vmarta May 16, 2023

Choose a reason for hiding this comment

vmarta May 16, 2023

Choose a reason for hiding this comment

adamraya left a comment • edited Loading

Choose a reason for hiding this comment

bfeister left a comment

Choose a reason for hiding this comment

vmarta commented May 17, 2023

vmarta commented May 16, 2023 •

edited

Loading

adamraya left a comment •

edited

Loading