You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
When navigating to the brand page on a demo store with data such as http://localhost:3001/brands/ofs we get an error on the page. If you look at the error its describing an issue between the brand page, and the static/brand page (server side)
`Error: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
A server/client branch if (typeof window !== 'undefined').
Variable input such as Date.now() or Math.random() which changes each time it's called.
Date formatting in a user's locale which doesn't match the server.
External changing data without sending a snapshot of it along with the HTML.
Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
This is in the current version of catalyst that I just built on Jan 2
Expected behavior
No Error occurs
Screenshots
Additional context
I beleive this error is caused because the ./static/page.tsx has Brands as a query where as the dynamix local page has Brand (singular) as the query. The graphql queries for each are out of sync
The text was updated successfully, but these errors were encountered:
Describe the bug
When navigating to the brand page on a demo store with data such as http://localhost:3001/brands/ofs we get an error on the page. If you look at the error its describing an issue between the brand page, and the static/brand page (server side)
`Error: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
if (typeof window !== 'undefined')
.Date.now()
orMath.random()
which changes each time it's called.It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<OuterLayoutRouter parallelRouterKey="children" segmentPath={[...]} template={} ...>
<InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
<HTTPAccessFallbackErrorBoundary pathname="/brands/ofs" notFound={[...]} forbidden={undefined} ...>
<InnerLayoutRouter parallelRouterKey="children" url="/brands/ofs" tree={[...]} childNodes={Map} ...>
<html
className="__variable_d65c78 font-sans"
lang="en"
at createUnhandledError (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/console-error.js:27:49)
at handleClientError (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-error-handler.js:44:56)
at console.error (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/client/components/globals/intercept-console-error.js:48:56)
at emitPendingHydrationWarnings (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:4300:17)
at completeWork (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:13611:18)
at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:544:16)
at completeUnitOfWork (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15200:19)
at performUnitOfWork (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15081:11)
at workLoopConcurrent (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15058:9)
at renderRootConcurrent (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15033:15)
at performWorkOnRoot (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14350:13)
at performWorkOnRootViaSchedulerTask (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15955:7)
at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-pages-browser)/../node_modules/.pnpm/next@15.1.0_@playwright[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:44:48)`
To Reproduce
Steps to reproduce the behavior:
This is in the current version of catalyst that I just built on Jan 2
Expected behavior
No Error occurs
Screenshots
Additional context
I beleive this error is caused because the ./static/page.tsx has Brands as a query where as the dynamix local page has Brand (singular) as the query. The graphql queries for each are out of sync
The text was updated successfully, but these errors were encountered: