# Custom code works in preview, but not on published site **URL:** \ **Category:** Bugs\ **Created:** [January 31, 2023, 11:33pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190 "2023-01-31T23:33:27Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [January 31, 2023, 11:33pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/1 "2023-01-31T23:33:27Z")
**Builder content link** _e.g. [Builder.io: Drag and drop Visual CMS](http://builder.io/content/4cab34394e684fe7b93d6ef5493a8a51)_ `https://builder.io/content/e0880194a3014a4281c35c3feda4f57a` **Builder public api key** _go to [Builder.io: Drag and drop Visual CMS](https://builder.io/account/organization) 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` ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 2, 2023, 10:00pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/2 "2023-02-02T22:00:55Z")
Apologies for the bump. Has anyone seen this, yet? ---
**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\ **Post date:** [February 3, 2023, 6:17am UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/3 "2023-02-03T06:17:41Z")
Hey @ReavoEnd, No worries! I got you. I’m investigating the issue and get back to you asap! ---
**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\ **Post date:** [February 3, 2023, 10:07am UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/4 "2023-02-03T10:07:22Z")
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? ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 3, 2023, 7:00pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/5 "2023-02-03T19:00:15Z")
Hi Garima, So here is the code, located in my page’s **Data** tab → **Edit Content JS + CSS** button: ```plaintext //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): ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 7, 2023, 12:14am UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/6 "2023-02-07T00:14:38Z")
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. ---
**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\ **Post date:** [February 7, 2023, 4:34pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/7 "2023-02-07T16:34:15Z")
Hey @ReavoEnd no worries, thank you for staying on top of it! We are investigating and will get back to you asap! ---
**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\ **Post date:** [February 7, 2023, 10:30pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/8 "2023-02-07T22:30:03Z")
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](https://builder.io/content/8fe299369e9f48a084f800ae5f951a3d/) at [Bigscreen](https://dev-egg-website.bigscreencloud.com/pages/home-tester-builder) To be able to test without affecting your homepage ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 7, 2023, 10:57pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/9 "2023-02-07T22:57:56Z")
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. ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 7, 2023, 11:14pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/10 "2023-02-07T23:14:58Z")
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](http://Builder.io). It must lie elsewhere… ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 7, 2023, 11:29pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/11 "2023-02-07T23:29:34Z")
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. ---
**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\ **Post date:** [February 8, 2023, 12:40am UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/12 "2023-02-08T00:40:16Z")
@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? ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 8, 2023, 1:15am UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/13 "2023-02-08T01:15:01Z")
Gotcha. The issue exists for all page models **published to our site** , yes. Anything that publishes to Shopify (our store site) works fine. ---
**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\ **Post date:** [February 8, 2023, 1:29am UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/14 "2023-02-08T01:29:08Z")
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? ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 8, 2023, 1:47am UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/15 "2023-02-08T01:47:23Z")
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: ```plaintext 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 }; export default BuilderIoPage; ``` This functions fine for page previews (which are hosted on the same independent, non-Shopify domain), but not for published pages. ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 8, 2023, 4:17am UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/16 "2023-02-08T04:17:08Z")
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: ```auto 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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/ab526005f9aab997cc0feb895901649e9cf64cc5.png) Wanted to share this in case it helps rule out possible problems. ---
**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\ **Post date:** [February 8, 2023, 2:30pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/17 "2023-02-08T14:30:14Z")
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! ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 8, 2023, 6:24pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/18 "2023-02-08T18:24:45Z")
> [@TimG](#): > > 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. 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](http://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! ---
**Author:** ![ReavoEnd](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/reavoend/32/2058_2.png) [@ReavoEnd](https://forum.builder.io/u/ReavoEnd)\ **Post date:** [February 8, 2023, 7:55pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/19 "2023-02-08T19:55:33Z")
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. ---
**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\ **Post date:** [February 8, 2023, 9:28pm UTC](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190/20 "2023-02-08T21:28:51Z")
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: ```auto 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 ( )}; export default BuilderIoPage; ``` [Next page](https://forum.builder.io/t/custom-code-works-in-preview-but-not-on-published-site/3190.md?page=2)