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.