Custom code works in preview, but not on published site

Bugs
1

Builder content link
e.g. Builder.io: Drag and drop Visual CMS
https://builder.io/content/e0880194a3014a4281c35c3feda4f57a

Builder public api key
go to Builder.io: Drag and drop Visual CMS and copy your PUBLIC api key
64dd5478e25746bf9db3b6c0319905f6

What are you trying to accomplish
e.g. I want to integrate builder on a landing page

We have spent months working on this page. It includes quite a few elements that leverage custom code (JS).

On the page preview (which features ?apiKey in the URL), everything functions as designed. However, after publishing the page and upon visiting it at its designated URL, none of the custom JavaScript appears to be working. This is specifically code stored in the sidebar “Custom Code/CSS” area.

There are no errors reported in the dev console, so no readily apparent reason for this behavior. Why is this happening, and what can we do to fix it?

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify
React

2

Apologies for the bump. Has anyone seen this, yet?

3

Hey @ReavoEnd, No worries! I got you. I’m investigating the issue and get back to you asap!

1 Like
4

Hey @ReavoEnd, I’ve looked into this and haven’t found the issue. Would you be able to record a screen share (Loom is great!) of this occurring?

5

Hi Garima,

So here is the code, located in my page’s Data tab → Edit Content JS + CSS button:

    //Mobile nav menu (hamburger) button
    let navBtn = document.getElementsByClassName('nav-btn');
    if(navBtn.length) {
      navBtn[0].onclick = (e) => {
        e.preventDefault();
        let navToggles = [
          {class: 'nav-mobile', cssProp: 'display', off: 'none', on: 'block'},
          {class: 'mobile-noterrr', cssProp: 'visibility', off: 'hidden', on: 'visible'},
          {class: 'icon-hamburger', cssProp: 'display', off: 'none', on: 'flex'},
          {class: 'icon-navx', cssProp: 'display', off: 'none', on: 'flex'},
        ];
        navToggles.forEach(populateQueries);
        navToggles.forEach(flipToggles);
      };
    }

Here is the result on the preview page – mobile nav menu toggle works:

And here it is on the published page – mobile nav menu toggle is broken, has default link behavior (reloads the page):

6

Is anyone still looking into this?

Sorry for the persistence but we intend to make our website public in one week. This issue is critical, and a blocker to our launch.

7

Hey @ReavoEnd no worries, thank you for staying on top of it! We are investigating and will get back to you asap!

8

Hi @ReavoEnd this is a very strange issue… we have done more investigating and for some reason the custom JS code doesn’t run on your live page.

I tried adding a Custom Code block with some console.logs. The console.logs are successful until I paste in your custom code, then nothing runs, which leads me to believe there is something in your custom code that is technically correct but for some reason the browser doesnt like.

We have seen this before where a browser will have strict linting and if it doesnt like it it will just remove it or not run the code. I would suggest commenting out sections of the code until you can diagnose which parts run and wont run.

I will try to spend more time digging on our end, but if you have any further insights that might help! I created a duplicate of the page:
Builder.io: Drag and drop Visual CMS at Bigscreen

To be able to test without affecting your homepage

9

Hi Tim,

Thanks for looking into this. That’s a helpful lead, sounds promising. I’ll look into what parts of the code could be considered unconventional to a linter.

It does seem to me that if this were an issue with the browser’s linting, it would surely output console errors or warnings of some sort. Given that it doesn’t, could the issue have more to do with the linter in Builder’s backbone, i.e. React or what-have-you?

I’ll keep digging around based on this lead. Will report back if I find anything more specific.

10

Ok, so I’ve now tried commenting out all of the code in Edit Content JS + CSS except for a single console.log() call.

• On the preview site, the new console message appears in the dev console
• On the published/live site, the new console message does not appear in the dev console

This indicates to me that the issue does not involve the custom code I wrote in that section of Builder.io. It must lie elsewhere…

11

Oh, one more thing about the test you ran with a custom code block.

If you pasted my custom code as-is, that would definitely not work because the custom code blocks strip out all the newlines. My custom code has a bunch of standard-form //text here comments, and this style of comment breaks JS scripts in custom code blocks. Just FYI!

How are you checking the outcome of your tests? Are you able to see the published page on an internal portal? Just a reminder that the JS issue I’m encountering is only on published pages, and do not manifest in the editor GUI or the page preview.

Edit: Had another thought. Some of my custom code interacts with Builder’s state. If I recall correctly, state is not accessible from a custom code block.

12

@ReavoEnd we were testing to a published dummy page at https://dev-egg-website.bigscreencloud.com/pages/home-tester-builder

And yes, I also noticed that actually commenting out all custom code still did not run the Custom JS code… which to me indicates something in your app is blocking the JS from running. I can’t recreate this same issue in any of our Shopify testing spaces either.

I actually copied your code into a testing space of mine and published the page and the code was seemingly running without issue, so it definitely seems to be interacting with something in your app in an unexpected way.

Do you know if any other pages or model types have the same issue across your site? Is it true of all page models?

13

Gotcha.

The issue exists for all page models published to our site, yes. Anything that publishes to Shopify (our store site) works fine.

14

ahhh @ReavoEnd I think I missed that nuance, so some content is published to an independent site, not necessarily to your hosted Shopify store??

Could you share the code snippet of how you have integrated the page model content in your non-Shopify app?

15

That’s correct. The pages published to our independent site are hosted by a React instance on our servers.

Here is the implementation within a React component:

import { builder, BuilderComponent } from "@builder.io/react";
import "@builder.io/widgets";

const BuilderIoPage = ({ account }) => {
  const [pageJson, setPage] = useState(null);
  let location = /* ...code... */;

  const shopLogin = /* ...code... */;

  const builderIoState = {
    shopLogin:  /* ...code... */
  };
 
  useEffect(() => {
    builder.get('page', { url: location })
      .promise().then(setPage);
  }, [location]);
  
  return <BuilderComponent model="page" content={pageJson} data={builderIoState} />
};

export default BuilderIoPage;

This functions fine for page previews (which are hosted on the same independent, non-Shopify domain), but not for published pages.

16

I haven’t found any new leads, but I did a little more digging in the Fetch / XHR tab in the Network dev panel. I was able to confirm that the published page fetches from the builder CDN via:

https://cdn.builder.io/api/v1/query/64dd5478e25746bf9db3b6c0319905f6/page?omit=meta.componentsUsed&apiKey=64dd5478e25746bf9db3b6c0319905f6&userAttributes.urlPath=%2Fpages%2Fhome&userAttributes.host=dev-egg-website.bigscreencloud.com&userAttributes.device=mobile&options.page.model=%22page%22

And the response on the published page does include our custom JS, just like it does on the preview page.

image
image911Ă—589 39.9 KB

Wanted to share this in case it helps rule out possible problems.

17

Yes, I noticed that too. I am still investigating, but I think the issue is that your space is setup as a Shopify space, not a CMS (headless) space. So the reason everything “works” in preview and the visual editor is because you are actually previewing/editing on a page in Shopify, not within your app. Generally if you are going to have a headless web-app or non-Shopify hosted web-app, we would recommend customers to have that content in a separate CMS space.

I am still surprised that the JS code doesn’t run, so I am looking through our code to see if there is a reason for that and how we can fix it in the meantime, but will get back to you when we have more! Appreciate your patience on this issue!

18

Is that really the case? I’m compelled to believe contrary. Our page model’s preview URL is set to dev-egg-website.bigscreencloud.com. Back when we were setting up our React instance to serve the builder.io page, both the editor GUI and the page preview would not load until we had everything setup correctly on our server. This would appear to indicate that the page model does not lean on Shopify to render at all.

Anyway, thanks for looking into this so thoroughly. Hoping we can resolve today!

19

In case it helps: Our testing domain is IP-whitelisted, so if the editor/preview/published pages don’t load for you, that’d be why.

If being on the whitelist would help you diagnose the issue more efficiently, we can add you temporarily and until a resolution is reached. Just let me know in a DM with your IP address.

20

Hi @ReavoEnd ok I checked your setup again and you are correct that the preview is not on Shopify.

I tried it out, and I am not exactly sure why but for some reason useEffect does not play well with the custom JS, and I confirmed that is true across all spaces. It might be something with the timing of how useEffect updates content end affects rendering? But the good news is it doesn’t matter!

You actually shouldn’t need to use useEffect at all. Since you are doing client-side rendering as long as you pass the urlPath to the you should be getting the correct content. Try something like this:

import { builder, BuilderComponent } from "@builder.io/react";
import "@builder.io/widgets";

const BuilderIoPage = ({ account }) => {
  let location = /* ...code... */;

  const shopLogin = /* ...code... */;

  const builderIoState = {
    shopLogin:  /* ...code... */
  };
 
  return (<BuilderComponent
            model="page" 
            options={{
               userAttributes: {
                  urlPath: location
                }
            }}
            data={builderIoState} />
)};

export default BuilderIoPage;
1 Like