Hydration error on Remix

[thomkrupa]

Describe the bug
There is a hydration error related to the builder pixel.

@sentry_remix.js?v=e6b38300:2948 Warning: Prop `dangerouslySetInnerHTML` did not match. Server: ".builder-pixel-ceg4x694qgu {\n    height: 0;\nwidth: 0;\ndisplay: inline-block;\nopacity: 0;\noverflow: hidden;\npointer-events: none;\n  }  " Client: ".builder-pixel-ceg4x694qgu {\n    display: inline-block;\npointer-events: none;\nheight: 0;\nwidth: 0;\noverflow: hidden;\nopacity: 0;\n  }  "

To Reproduce
Steps to reproduce the behavior:

1. Use builder sdk
2. Use component
3. Open console

Expected behavior
No hydration error.

Additional context
The latest version of SDK @1.0.28

[oxcabe]

This is happening to me as well.

[samijaber]

@oxcabe Can you share more information? We are not able to reproduce this issue. We need:

• your SDK and version (e.g. React Gen 2 SDK v5.0.0)
• your techstack (nextjs, remix, etc)
• the content entry causing the hydration issue

[oxcabe]

Sure!

• SDK and version: React Gen 2 SDK v2.0.29 "@builder.io/sdk-react": "2.0.29"
• Tech Stack: Remix "@remix-run/react": "2.12.0"
• Content Entry: It's a footer section with a single top-level Section block. I'll provide the content entry below. Feel free to remove the message or edit it if I'm adding sensitive information somehow.

{
  "ownerId": "cfcf2432b6b34bce9cdba0eb882358f9",
  "lastUpdateBy": null,
  "createdDate": 1727775840750,
  "id": "5545e8005e9e40e9a0eddcfddcf365fa",
  "@version": 4,
  "name": "Main Footer",
  "modelId": "bf3230293fc44c8d9b66b07b8d4067c1",
  "published": "published",
  "meta": {
    "kind": "component",
    "lastPreviewUrl": "http://localhost:5173/?builder.space=cfcf2432b6b34bce9cdba0eb882358f9&builder.user.permissions=read%2Ccreate%2Cpublish%2CeditCode%2CeditDesigns%2Cadmin%2CeditLayouts%2CeditLayers&builder.user.role.name=Admin&builder.user.role.id=admin&builder.cachebust=true&builder.preview=footer&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.footer=5545e8005e9e40e9a0eddcfddcf365fa&builder.overrides.5545e8005e9e40e9a0eddcfddcf365fa=5545e8005e9e40e9a0eddcfddcf365fa&builder.options.includeRefs=true&builder.options.enrich=true",
    "hasLinks": true
  },
  "priority": -26,
  "query": [],
  "data": {
    "cssCode": "/*\n* Custom CSS styles\n*\n* Global by default, but use `&` to scope to just this content, e.g.\n*\n*   & .foo {\n*     color: 'red'\n*   }\n\n\n& .newsletter-input:hover {\n  border-color: #919191;\n}\n\n& .newsletter-input:focus-within {\n  border-color: #000000;\n}\n*/",
    "customFonts": [
      {
        "menu": "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJHedw.ttf",
        "family": "Poppins",
        "subsets": [
          "devanagari",
          "latin",
          "latin-ext"
        ],
        "version": "v20",
        "files": {
          "100": "https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTed3FBGPaTSQ.ttf",
          "200": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_V1tvFP-KUEg.ttf",
          "300": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8V1tvFP-KUEg.ttf",
          "500": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9V1tvFP-KUEg.ttf",
          "600": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6V1tvFP-KUEg.ttf",
          "700": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7V1tvFP-KUEg.ttf",
          "800": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4V1tvFP-KUEg.ttf",
          "900": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5V1tvFP-KUEg.ttf",
          "900italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm81xlEN2PQEhcqw.ttf",
          "800italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm111lEN2PQEhcqw.ttf",
          "regular": "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrFJDUc1NECPY.ttf",
          "200italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmv1plEN2PQEhcqw.ttf",
          "600italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmr19lEN2PQEhcqw.ttf",
          "100italic": "https://fonts.gstatic.com/s/poppins/v20/pxiAyp8kv8JHgFVrJJLmE3tFOvODSVFF.ttf",
          "italic": "https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLed3FBGPaTSQ.ttf",
          "500italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmg1hlEN2PQEhcqw.ttf",
          "700italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15lEN2PQEhcqw.ttf",
          "300italic": "https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm21llEN2PQEhcqw.ttf"
        },
        "variants": [
          "100",
          "100italic",
          "200",
          "200italic",
          "300",
          "300italic",
          "regular",
          "italic",
          "500",
          "500italic",
          "600",
          "600italic",
          "700",
          "700italic",
          "800",
          "800italic",
          "900",
          "900italic"
        ],
        "category": "sans-serif",
        "kind": "webfonts#webfont",
        "lastModified": "2022-09-22"
      }
    ],
    "blocks": [
      "/* @ref:block:builder-2d49d0f21a0742b6940b0b57baaa6848 */"
    ]
  },
  "metrics": {
    "clicks": 0,
    "impressions": 0
  },
  "variations": {},
  "lastUpdated": 1730990266238,
  "firstPublished": 1727775878718,
  "testRatio": 1,
  "createdBy": "qzYT7aPaDYNSHPZgcTb7qs2VpTP2",
  "lastUpdatedBy": "qzYT7aPaDYNSHPZgcTb7qs2VpTP2",
  "folders": []
}

I'm doing this to fetch and render the entry:

// Inside the Remix loader...
const footer = await fetchOneEntry({
  model: "footer",
  apiKey: apiKey,
  query: {
    id: page?.data?.footer?.id,
  },
});

// Inside the component...

<Content
  model="footer"
  apiKey={apiKey}
  content={footer as BuilderContent}
  customComponents={CUSTOM_COMPONENTS}
  enrich={true}
/>

What I've noticed is that fetchOneEntry returns two blocks in data.blocks: the aforementioned Section block and the pixel block. This doesn't happen in any other of my sections from other section models. There's no data binding nor JavaScript in the footer.

Hope this info helps. Feel free to ask me for more details or to bring this conversation elsewhere if needed.

[oxcabe]

So, how do we address this? Should I filter the pixel from the Content API responses, since that's what it seems to be causing the markup mismatch?

[sidmohanty11]

Hi @oxcabe,

Apologies for the delayed response! We're actively investigating this issue.

However, it does not seem to happen if we follow these steps:

SDK and version: React Gen 2 SDK v2.0.29 "@builder.io/sdk-react": "2.0.29"
Tech Stack: Remix "@remix-run/react": "2.12.0"
Content Entry: It's a footer section with a single top-level Section block. I'll provide the content entry below. Feel free to remove the message or edit it if I'm adding sensitive information somehow.

Although the pixel is being sent from the API but that doesn't throw a hydration error.

page using footer-test section model

footer-test section model

I am using the versions you've mentioned and I have created a GitHub repository to share the code I am using (complete barebone setup) here: https://github.com/sidmohanty11/remix-builder-gen2/blob/main/app/routes/(%24slug)._index.tsx
package.json: https://github.com/sidmohanty11/remix-builder-gen2/blob/f24897a6cbc4c2a56be8ce2584e911305632e48c/package.json#L15C1-L18C34

Please let us know if there's anything we're missing.

[oxcabe]

Hey @sidmohanty11, thanks for the work you've put into replicating the issue.

It's been three months since this was reported, and things look way different on our side as of today.

So far, we've "fixed" this situation by moving to Vue/Nuxt. I don't really know what was causing the hydration issues, but currently I'm unable to provide further information, as both the code and content from the project space have changed substantially.

If no one else is complaining, I believe we can consider this issue resolved for the time being.

I'm genuinely unsure of why both React SDKs are so problematic. To me, they've been a big source of frustration for the past few months, so I can't imagine how much of a pain point might this be on your side; to be supporting both versions while fixing the performance on the latter.

From an architectural standpoint, I'd argue Builder optimises for integration flexibility, which seems to be trading it off discoverability and, especially, understandability. I strongly believe that there should be some work placed on, at least, curating a fool-proof, opinionated guide that users might opt-in to minimise all the confusion and frustration mentioned before.

I'd love to help on this (if allowed to). We may be able to discuss as its own topic somewhere else.

[thomkrupa]

We fixed it by filtering out the pixel and creating our custom <Content /> component. Then, we gave up on Builder and migrated to a different CMS.

I can confirm that working with React SDKs is pretty painful.

I agree with @oxcabe if no one can reproduce the issue, I think we can close it.

[sidmohanty11]

Thanks @oxcabe for the quick response! We've been working hard over the past few months in getting our gen2 SDKs to stable releases, which means we've had to make some significant architectural updates and breaking changes along the way. I'm confident that this puts us in a much better position with our React Gen2 SDK as of now.

We really appreciate your feedback and would love to refine the experience even more in the future! If you have any questions or need support, please don't hesitate to reach out - we've got a dedicated support team just for that. Alternatively, feel free to share your thoughts and ideas on our forum, where we'd be happy to discuss them with you.

I'm going ahead and closing this issue for now since we're unable to reproduce the problem. However, if you do encounter any issues in the future, please don't hesitate to reopen it.