hydration error stepper component nextjs 13 app dir
Closed this issue · 1 comments
jalaguerom commented
Describe the bug A clear and concise description of what the bug is.
When using the app dir in nextjs 13 there is a console error using Stepper component
Warning: Expected server HTML to contain a matching <animate> in <path>.
at animate
at path
at g
at svg
at u (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/icons/icon-success.js:81:17)
at O (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/icons/icon-success.js:114:17)
at div
at div
at div
at Z (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/stepper.js:82:18)
at div
at CustomStepper (webpack-internal:///(app-client)/./src/components/wizards/custom-stepper.tsx:7:11)
at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:149:1)
at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:178:11)
at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:334:9)
at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:341:11)
at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:377:11)
at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:289:11)
at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:20:11)
at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:149:1)
at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:178:11)
at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:334:9)
at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:341:11)
at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:377:11)
at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:289:11)
at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:20:11)
at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:149:1)
at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:178:11)
at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:334:9)
at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:341:11)
at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:370:9)
at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:377:11)
at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:289:11)
at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:20:11)
at div
at div
at Me (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/dialog.js:406:9)
at P (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/screen-size-context-provider.js:17:21)
at E (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/utils/document-visibility.js:16:19)
at W (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/utils/aspect-ratio-support.js:74:21)
at p (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/utils/analytics.js:23:21)
at S (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/modal-context-provider.js:43:21)
at w (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/tab-focus.js:21:21)
at ut (webpack-internal:///(app-client)/./node_modules/@telefonica/mistica/dist-es/theme-context-provider.js:100:18)
at MisticaProvider (webpack-internal:///(app-client)/./src/contexts/mistica-context-provider.tsx:11:11)
at WalletContextProvider (webpack-internal:///(app-client)/./src/contexts/wallet-context.tsx:58:11)
at GoogleAnalyticsContextProvider (webpack-internal:///(app-client)/./src/contexts/google-analytics-context.tsx:45:11)
at body
at html
at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:149:1)
at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:178:11)
at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:334:9)
at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:341:11)
at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:377:11)
at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:289:11)
at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:63:9)
at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:20:11)
at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:58:9)
at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)
at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:99:11)
at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:63:9)
at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:20:13)
at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:126:11)
at RSCComponent
at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:143:11)
Warning: You are accessing "digest" from the errorInfo object passed to onRecoverableError. This property is deprecated and will be removed in a future version of React. To access the digest of an Error look for this property on the Error instance itself.
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
at updateHostRoot (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22943:57)
at beginWork (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24809:14)
at beginWork$1 (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:32180:14)
at performUnitOfWork (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31077:12)
at workLoopSync (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30886:5)
at renderRootSync (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30851:7)
at recoverFromConcurrentError (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30104:20)
at performConcurrentWorkOnRoot (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29991:22)
at workLoop (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3897)
at flushWork (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:3606)
at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/es/login/app-client)/./node_modules/next/dist/compiled/scheduler/index.js:11:1787)
To Reproduce Steps to reproduce the behavior:
Create the following component
'use client';
import {Stepper} from '@telefonica/mistica';
type Props = {
step?: number;
textValues?: string[];
};
const CustomStepper = ({step, textValues}: Props) => {
return (
<div className="h-[100px]">
<Stepper currentIndex={1} steps={['Hola', 'Adiós']} aria-label="Progress" />
</div>
);
};
export default CustomStepper;
and use it in a page like the following
const Page = ({params, searchParams}: LayoutPagesProps) => {
return (
<>
<CustomStepper />
</>
);
};
Passing currentIndex={0} as Stepper component prop does not throw any console error
tuentisre commented
🎉 This issue has been resolved in version 14.2.0 🎉
The release is available on:
Your semantic-release bot 📦🚀