mako3577
commented
1 year ago How to reproduce the problem? Have you tried to disable SSR? That's how to do that for example MDBChart component:
const MDBChart = dynamic(() => import("./mdb/src/pro/data/Chart/Chart"), { ssr: false });
MDB React code which works fine using the old (pages) method generates Unhandled Runtime Error when incorporated into app/page.tsx. Is MDBootstrap not yet written to work in this environment, or is there some obscure setup/config setting that's lacking?
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching in .
See more info here: https://nextjs.org/docs/messages/react-hydration-error
Component Stack a Kt ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (1190:14) a eval ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (652:16) div Pe ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (1000:14) Le ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (952:13) Vt ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (1018:23) div div eval ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (96:18) nav eval ./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js (615:16) Home ./src/app/page.tsx (15:100) Call Stack throwOnHydrationMismatch node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (6789:0) tryToClaimNextHydratableInstance node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (6818:0) updateHostComponent$1 node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (15520:0) beginWork$1 node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (17355:0) HTMLUnknownElement.callCallback node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19443:0) Object.invokeGuardedCallbackImpl node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19492:0) invokeGuardedCallback node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (19567:0) beginWork node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25697:0) performUnitOfWork node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24526:0) workLoopConcurrent node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24512:0) renderRootConcurrent node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24468:0) performConcurrentWorkOnRoot node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23339:0) workLoop node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (261:0) flushWork node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (230:0) MessagePort.performWorkUntilDeadline node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (534:0)