search

BuilderIO / builder

Visual Development for React, Vue, Svelte, Qwik, and more
https://builder.io
MIT License
7.58k stars 950 forks source link

Hydration error on Remix #3317

Open thomkrupa opened 5 months ago

thomkrupa commented 5 months ago

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 commented 3 weeks ago

This is happening to me as well.

samijaber commented 3 weeks ago

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

oxcabe commented 3 weeks ago

Sure!

{
  "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.