Data binding works in builder but broken on deploy

[acarteas]

Builder content link

Builder.io: Visual Development Platform

Builder public api key
93b6832e9f3b41318d01d3937c958ce8

What are you trying to accomplish
I’m playing around with data binding. As a test, I created a “Styles” model with the intent of centralizing theme colors. I started by creating a single entry for “Header Color”. I then created a test page with a single H1 tag and data bound the color to the style. The correct color shows up in the Builder designer, but on my test site the font color stays the default black and I see several hundred messages of [Builder.io]: Failed code evaluation: Cannot read properties of undefined (reading 'data'). In looking at the JSON payload, I do indeed see the following:

"styles": {
    "data": {
        "headerColor": "rgba(41, 0, 255, 1)"
    }
}

My site is deployed on cloudflare pages using the quickstart code for vanilla React. URL: React App. Is there something missing on the React side to grab and use my data?

Thanks,
Adam

Screenshots or video link

Selecting the data model

Data binding to the header

What the header looks like in builder

What the header looks like on deploy along with the console errors

Code stack you are integrating Builder with
React, Cloudflare Pages

[justadev]

I am experiencing the same/similar issue using Qwik with Cloudflare Pages:

The state data shows up fine while in the Builder.io Editor - for both dev and deploy URLs - but doesn’t work when opening the deployed URL the regular way in the browser.

Log from Cloudflare:

{
  "outcome": "ok",
  "scriptName": "pages-worker--1234567-production",
  "diagnosticsChannelEvents": [],
  "exceptions": [],
  "logs": [
    {
      "message": [
        "[Builder.io]: ",
        "Failed code evaluation: Code generation from strings disallowed for this context",
        {
          "code": "var __awaiter=function(e,n,t,r){return new(t||(t=Promise))((function(o,i){function a(e){try{l(r.next(e))}catch(e){i(e)}}function u(e){try{l(r.throw(e))}catch(e){i(e)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(a,u)}l((r=r.apply(e,n||[])).next())}))},__generator=function(e,n){var t,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:u(0),throw:u(1),return:u(2)},\"function\"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function u(i){return function(u){return function(i){if(t)throw new TypeError(\"Generator is already executing.\");for(;a;)try{if(t=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=(o=a.trys).length>0&&o[o.length-1])&&(6===i[0]||2===i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=n.call(e,a)}catch(e){i=[6,e],r=0}finally{t=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,u])}}};function main(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return Builder.isServer,Builder.isBrowser,[2]}))}))}var _virtual_index=main();return _virtual_index"
        }
      ],
      "level": "error",
      "timestamp": 1712393700463
    },
    {
      "message": [
        "[Builder.io]: ",
        "Failed code evaluation: Code generation from strings disallowed for this context",
        {
          "code": "var __awaiter=function(e,n,t,r){return new(t||(t=Promise))((function(o,i){function a(e){try{l(r.next(e))}catch(e){i(e)}}function u(e){try{l(r.throw(e))}catch(e){i(e)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(a,u)}l((r=r.apply(e,n||[])).next())}))},__generator=function(e,n){var t,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:u(0),throw:u(1),return:u(2)},\"function\"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function u(i){return function(u){return function(i){if(t)throw new TypeError(\"Generator is already executing.\");for(;a;)try{if(t=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=(o=a.trys).length>0&&o[o.length-1])&&(6===i[0]||2===i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=n.call(e,a)}catch(e){i=[6,e],r=0}finally{t=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,u])}}};function main(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return Builder.isServer,Builder.isBrowser,[2]}))}))}var _virtual_index=main();return _virtual_index"
        }
      ],
      "level": "error",
      "timestamp": 1712393700463
    },
    {
      "message": [
        "task",
        "s_BlaBLabLA"
      ],
      "level": "error",
      "timestamp": 1712393700463
    },
    {
      "message": [
        "[Builder.io]: ",
        "Failed code evaluation: Code generation from strings disallowed for this context",
        {
          "code": "var _virtual_index=state.myVarExample;return _virtual_index"
        }
      ],
      "level": "error",
      "timestamp": 1712393700463
    }
  ]
}

An only that’s remotely close that I found in docs is Connecting your API data to builder - Builder.io, but I don’t use React, I use Qwik.

I’d appreciate any help. Thank you.

[sheema]

Hey @justadev

Thank you for reaching out to the Builder.io Forum with your question about Qwik! Unfortunately, this support channel is only intended for questions about the use of the Builder.io Visual Editor and its related plans and pricing.

However, Our Open source development team would love to help you take advantage of Qwik and Partytown to boost your site performance scores further and provide more value to your implementation with Builder.

To reach out to the Partytown and Qwik open source project teams, please head over to our Discord and join the discussion there. For the best results, we’d recommend you make a copy of your implementation of Partytown and place it in a Stackblitz project for review, then share it with the #general-partytown channel.

You are also welcome to reach out for Partytown help by creating a discussion topic or Issue in the Github repo: https://github.com/BuilderIO/partytown/

I hope you find the information above helpful and please don’t hesitate to reach out to us if you need any further assistance.

[acarteas]

I appreciate the replies. I don’t think my particular issue is related to Cloudflare as I get the same results on localhost. Further advice would be appreciated.