IsBrowser doesn't seem to work when page is published

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Detailed steps to reproduce the bug
I have tried to add a basic log line to the Builder.IsBrowser block in the JS editor as a debugging step for understanding why my custom fetch request wasn’t working. I was surprised to learn that even this console.log doesn’t work once the page has been published.

Works when in preview console.

Code stack you are integrating Builder with
React only

Reproducible code example

/*

  * Global objects available:

  *

  * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions

  * context - builder context object - learn about state https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down

  * fetch - Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'

  * Builder - Builder object - useful values include: Builder.isServer, Builder.isBrowser, Builder.isPreviewing, Builder.isEditing

  *

  * visit https://www.builder.io/c/docs/guides/custom-code

  * for more information on writing custom code

  */

 async function main () {

  if (Builder.isServer) {

    // Place any code here you want to only run on the server. Any  

    // data fetched on the server will be available to re-hydrate on the client

    // if added to the state object

  }

  if (Builder.isBrowser) {

    // Place code that you only want to run in the browser (client side only) here

    // For example, anything that uses document/window access or DOM manipulation

    console.log('is browser4');

  }

}

export default main();

Hi there, I was wondering if anyone has any suggestions as to why this isn’t working? Many thanks in advance

Hi @tomMisson, I can’t access your page (Error 1020: Access Denied) making this difficult to debug. Could you share your fetch request or perhaps DM me with access? Thanks

Hi there @ ancheetah yeah, sorry, the site we are developing on is a held behind the company vpn hence why I gave the code example…

The fetch statement we are trying to get to work is:

async function main() {
        if (Builder.isBrowser){

        state.blogposts.foreach(blogpost, index){
            
        const author = async () => {
            const raw = await fetch("https://www.masterofmalt.com/blog/wp-json/wp/v2/users/"+blogpost.author)
            let refined = await raw.json();
            return refined.name;
        }

        author().then(res => {state.blogposts[index].author = res});
        }
    }
}

It must be noted thought that even the console.log() when put in the Builder.isBrowser also doesn’t work.

1 Like

Here we are! I have pulled the same builder page in to our public workspace and pointed it at our public api.

https://www.masterofmalt.com/4476-f-749-7-b-5-b-4-fc-3-82-f-1-80-dc-850-c-93-fa/

The console in the builder interface shows the log lines absolutely fine but the live page doesn’t show the log lines and also doesn’t attempt the fetch (can be seen in the network tab)

Hi @tomMisson thanks so much for sharing the public version. I do see that the console.log() message is not appearing on your live page but I’m unable to reproduce this behavior independently in my own test space with your fetch. (Here’s a fiddle where I use your fetch call [Fiddle], and here’s the live page where it logs ok in the console [Live]). Could there be something in your code for that page template suppressing console logs?

Hi @ancheetah, hmmm very odd indeed, we don’t have anything that would strip them out/supress them…

I have updated the fiddle to accurately reflect what we are trying to do as console logging was not really a concern of ours, more that the results of the fetch aren’t loading… Fiddle

When the fiddle is updated to map data in to components, it works in the preview but not the published page.

@tomMisson I’ll bring this bug up with our engineering team and update you here when we have a solution. In the meantime, a workaround could be to fetch from both your endpoints in the Content API Data section in the Data tab then use custom JS to map the authors from one dataset to the other. Hope this helps!

https://builder.io/fiddle/83316a8c065f43b7a12678ad67a52705

@ancheetah Amazing! Cheers, will give it a go

Hi there! Was wondering if there has been any progress with this bug? I believe it may have manifested itself in another form…

When creating a Content Input, setting its value and then copying the page contents to another space, the value of the input in the state becomes undefined when published, despite its value being set.

My questions I guess then are:

  • is this the correct / intended use of content inputs? (the use being as a constant within the state)
  • is this the same issue as before as they both seem to result in undefined values.

Many thanks

Tom

Hi @tomMission,

Content inputs are more commonly used with symbols but you can also use them the way you mentioned if you need to. It sounds like this issue may also be related to your previous bug because I am not able to reproduce.

I see that you have unpublished the page in your public workspace that you shared. Our team can’t reproduce on our side without seeing the page, so I think a screenshare would be helpful. Someone will be reaching out by email to see if we can offer further support.

Best,
AJ

Hi @ancheetah, thanks so much, this is massively appreciated. I look forward to finally getting to the bottom of these issues.

1 Like