puck icon indicating copy to clipboard operation
puck copied to clipboard
verified publisher icon puckeditor

Bug: Remix recipe does not render Puck correctly in new page routes

Open FedericoBonel opened this issue 8 months ago • 2 comments

Description

When using the remix recipe, navigating to new routes (other than the homepage) results in Puck styles not loading correctly, making the editor unusable.

Environment

  • Puck version: 0.18.2

Steps to reproduce

  1. Start a new Puck project using the Remix recipe.
  2. Navigate to http://localhost:3000/new-page/edit.

What happens

The editor briefly renders correctly, but then fails to display properly, as if @measured/puck/puck.css wasn’t loaded.

Image

In addition, hydration errors appear in the console:

hook.js:608 Warning: Expected server HTML to contain a matching <link> in <head>. Error Component Stack
    at link (<anonymous>)
    at Links (components.js:226:7)
    at head (<anonymous>)
    at html (<anonymous>)
    at App (<anonymous>)
    at RenderedRoute (hooks.tsx:665:26)
    at RenderErrorBoundary (hooks.tsx:591:5)
    at DataRoutes2 (index.tsx:767:3)
    at Router (components.tsx:421:13)
    at RouterProvider2 (index.tsx:489:3)
    at RemixErrorBoundary (errorBoundaries.js:17:5)
    at RemixBrowser (browser.js:254:45)
overrideMethod @ hook.js:608
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:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19931:5)
    at beginWork (react-dom.development.js:21657:14)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27490:7)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopConcurrent (react-dom.development.js:26582:5)
hook.js:608 Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19931:5)
    at beginWork (react-dom.development.js:21657:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopConcurrent (react-dom.development.js:26582:5)
    at renderRootConcurrent (react-dom.development.js:26544:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777:38)
    at workLoop (scheduler.development.js:266:34) Error Component Stack
    at RemixRootDefaultErrorBoundary (errorBoundaries.js:70:3)
    at ErrorBoundary (routes.js:43:12)
    at RenderErrorBoundary (hooks.tsx:591:5)
    at DataRoutes2 (index.tsx:767:3)
    at Router (components.tsx:421:13)
    at RouterProvider2 (index.tsx:489:3)
    at RemixErrorBoundary (errorBoundaries.js:17:5)
    at RemixBrowser (browser.js:254:45)
overrideMethod @ hook.js:608
hook.js:600 Error: Hydration failed because the initial UI does not match what was rendered on the server. Error Component Stack
    at RemixRootDefaultErrorBoundary (errorBoundaries.js:70:3)
    at ErrorBoundary (routes.js:43:12)
    at RenderErrorBoundary (hooks.tsx:591:5)
    at DataRoutes2 (index.tsx:767:3)
    at Router (components.tsx:421:13)
    at RouterProvider2 (index.tsx:489:3)
    at RemixErrorBoundary (errorBoundaries.js:17:5)
    at RemixBrowser (browser.js:254:45)
overrideMethod @ hook.js:600
hook.js:608 Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19931:5)
    at beginWork (react-dom.development.js:21657:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopConcurrent (react-dom.development.js:26582:5)
    at renderRootConcurrent (react-dom.development.js:26544:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777:38)
    at workLoop (scheduler.development.js:266:34) Error Component Stack
    at RemixRootDefaultErrorBoundary (errorBoundaries.js:70:3)
    at RemixErrorBoundary (errorBoundaries.js:17:5)
    at RemixBrowser (browser.js:254:45)
overrideMethod @ hook.js:608
hook.js:600 Error: Hydration failed because the initial UI does not match what was rendered on the server. Error Component Stack
    at RemixRootDefaultErrorBoundary (errorBoundaries.js:70:3)
    at RemixErrorBoundary (errorBoundaries.js:17:5)
    at RemixBrowser (browser.js:254:45)
overrideMethod @ hook.js:600
hook.js:608 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
overrideMethod @ hook.js:608
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:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19931:5)
    at beginWork (react-dom.development.js:21657:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopConcurrent (react-dom.development.js:26582:5)
    at renderRootConcurrent (react-dom.development.js:26544:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777:38)
    at workLoop (scheduler.development.js:266:34)
react-dom.development.js:26951 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19931:5)
    at beginWork (react-dom.development.js:21657:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopConcurrent (react-dom.development.js:26582:5)
    at renderRootConcurrent (react-dom.development.js:26544:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777:38)
    at workLoop (scheduler.development.js:266:34)
react-dom.development.js:26951 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js:12507:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19931:5)
    at beginWork (react-dom.development.js:21657:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopConcurrent (react-dom.development.js:26582:5)
    at renderRootConcurrent (react-dom.development.js:26544:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777:38)
    at workLoop (scheduler.development.js:266:34)
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:9)
    at tryToClaimNextHydratableInstance (react-dom.development.js:12535:7)
    at updateHostComponent (react-dom.development.js:19931:5)
    at beginWork (react-dom.development.js:21657:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopConcurrent (react-dom.development.js:26582:5)
    at renderRootConcurrent (react-dom.development.js:26544:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777:38)
    at workLoop (scheduler.development.js:266:34)
react-dom.development.js:19878 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 (react-dom.development.js:19878:57)
    at beginWork (react-dom.development.js:21654:14)
    at beginWork$1 (react-dom.development.js:27465:14)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopSync (react-dom.development.js:26505:5)
    at renderRootSync (react-dom.development.js:26473:7)
    at recoverFromConcurrentError (react-dom.development.js:25889:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:25789:22)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
hook.js:608 ⚠️ React Router Future Flag Warning: Relative route resolution within Splat routes is changing in v7. You can use the `v7_relativeSplatPath` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_relativesplatpath. Error Component Stack
    at RouterProvider2 (index.tsx:489:3)
    at RemixErrorBoundary (errorBoundaries.js:17:5)
    at RemixBrowser (browser.js:254:45)
overrideMethod @ hook.js:608
hook.js:608 Warning: `NaN` is an invalid value for the `height` css style property. Error Component Stack
    at div (<anonymous>)
    at div (<anonymous>)
    at div (<anonymous>)
    at Canvas (index.mjs:7192:30)
    at div (<anonymous>)
    at div (<anonymous>)
    at DefaultOverride (index.mjs:7377:26)
    at DropZoneProvider (index.mjs:3219:3)
    at ZoneStoreProvider (index.mjs:3213:3)
    at DragDropProvider (index.js:81:5)
    at div (<anonymous>)
    at DragDropContextClient (index.mjs:4902:3)
    at DragDropContext2 (index.mjs:5275:3)
    at AppProvider (index.mjs:1006:3)
    at div (<anonymous>)
    at Puck (index.mjs:7443:3)
    at Edit (edit.tsx:72:7)
    at RenderedRoute (hooks.tsx:665:26)
    at Outlet (components.tsx:341:26)
    at body (<anonymous>)
    at html (<anonymous>)
    at App (<anonymous>)
    at RenderedRoute (hooks.tsx:665:26)
    at RenderErrorBoundary (hooks.tsx:591:5)
    at DataRoutes2 (index.tsx:767:3)
    at Router (components.tsx:421:13)
    at RouterProvider2 (index.tsx:489:3)
    at RemixErrorBoundary (errorBoundaries.js:17:5)
    at RemixBrowser (browser.js:254:45)
overrideMethod @ hook.js:608

What I expect to happen

The Puck editor should render correctly on any route, not just the homepage. Styles should apply consistently, and hydration errors should not occur.

FedericoBonel avatar Apr 07 '25 02:04 FedericoBonel

We work with remix (router 7 data and framework mode, puck works fine for us). Im sure the issue is not connected to puck.

kalysti avatar Oct 25 '25 12:10 kalysti

Hello @kalysti 😄!

Thanks for chiming in, this problem specifically is about the recipe we offer for scaffolding a new project from scratch with Remix.

FedericoBonel avatar Oct 25 '25 12:10 FedericoBonel