isServer is not executing on newly created pages

Bugs
, , ,
1

Self Explanatory.

I have a url. That url targeted as starts with. The wildcard will be populated with a GUI. I extract the GUI in the Builder.isServer block and apply it to the state… This works on other pages, but not newly created ones.

Everything is exactly by the book.

Here is the targeting config:

image

Server Code (commented out because I am desperate to get anything working with it).

/*
* 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
*
*/

async function main() {
  if (Builder.isServer) {
    state.test = "hello!":
    // 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
    // const guidRegex = /([a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12})$/;
    // let guid = null;
    // const endOfPath = state.location.path[state.location.path.length - 1]
    // if (guidRegex.test(endOfPath)) {
    //   guid = endOfPath;
    // }
    // state.guid = guid;
    // state.test = "hello";

  }
  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
  }
}

export default main();

Code inside the response body:

tsCode: '/*\n' +
    '* Global objects available:\n' +
    '*\n' +
    '* state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions\n' +
    '* context - builder context object - learn about state https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down\n' +
    "* fetch - Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'\n" +
    '* Builder - Builder object - useful values include: Builder.isServer, Builder.isBrowser, Builder.isPreviewing, Builder.isEditing\n' +
    '*\n' +
    '*/\n' +
    '\n' +
    'async function main() {\n' +
    '  if (Builder.isServer) {\n' +
    '    state.test = "hello!":\n' +
    '    // Place any code here you want to only run on the server. Any\n' +
    '    // data fetched on the server will be available to re-hydrate on the client\n' +
    '    // if added to the state object\n' +
    '    // const guidRegex = /([a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12})$/;\n' +
    '    // let guid = null;\n' +
    '    // const endOfPath = state.location.path[state.location.path.length - 1]\n' +
    '    // if (guidRegex.test(endOfPath)) {\n' +
    '    //   guid = endOfPath;\n' +
    '    // }\n' +
    '    // state.guid = guid;\n' +
    '    // state.test = "hello";\n' +
    '\n' +
    '  }\n' +
    '  if (Builder.isBrowser) {\n' +
    '    // Place code that you only want to run in the browser (client side only) here\n' +
    '    // For example, anything that uses document/window access or DOM manipulation\n' +
    '  }\n' +
    '}\n' +
    '\n' +
    'export default main();',

Here is the url path:
urlPath sponsor/corporateCampaign/361b9f94-c669-437f-b17c-c5a903b1a2b4

Here is the json:

{
  inputs: [],
  jsCode: 'var __awaiter=function(e,t,n,r){return new(n||(n=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 t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,u)}l((r=r.apply(e,t||[])).next())}))},__generator=function(e,t){var n,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(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=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=t.call(e,a)}catch(e){i=[6,e],r=0}finally{n=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&&(state.test="hello!"),Builder.isBrowser,[2]}))}))}var _virtual_index=main();return _virtual_index',
  themeId: false,
  title: 'Corporate Campaign',
  tsCode: '/*\n' +
    '* Global objects available:\n' +
    '*\n' +
    '* state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions\n' +
    '* context - builder context object - learn about state https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down\n' +
    "* fetch - Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'\n" +
    '* Builder - Builder object - useful values include: Builder.isServer, Builder.isBrowser, Builder.isPreviewing, Builder.isEditing\n' +
    '*\n' +
    '*/\n' +
    '\n' +
    'async function main() {\n' +
    '  if (Builder.isServer) {\n' +
    '    state.test = "hello!":\n' +
    '    // Place any code here you want to only run on the server. Any\n' +
    '    // data fetched on the server will be available to re-hydrate on the client\n' +
    '    // if added to the state object\n' +
    '    // const guidRegex = /([a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12})$/;\n' +
    '    // let guid = null;\n' +
    '    // const endOfPath = state.location.path[state.location.path.length - 1]\n' +
    '    // if (guidRegex.test(endOfPath)) {\n' +
    '    //   guid = endOfPath;\n' +
    '    // }\n' +
    '    // state.guid = guid;\n' +
    '    // state.test = "hello";\n' +
    '\n' +
    '  }\n' +
    '  if (Builder.isBrowser) {\n' +
    '    // Place code that you only want to run in the browser (client side only) here\n' +
    '    // For example, anything that uses document/window access or DOM manipulation\n' +
    '  }\n' +
    '}\n' +
    '\n' +
    'export default main();',
  url: '/sponsor/corporateCampaign/**'
}

Same exact server js on a different page results in the following state (exactly what I want):

page {
  deviceSize: 'large',
  location: {
    pathname: '/sponsor/ufo/649336a6-5dae-4200-beb7-4418084ee69f',
    path: [ 'sponsor', 'ufo', '649336a6-5dae-4200-beb7-4418084ee69f' ],
    query: {}
  },
  guid: '649336a6-5dae-4200-beb7-4418084ee69f'
}
```json
**Screenshots or video link**


**Code stack you are integrating Builder with** 
NextJS
"@builder.io/react": "2.0.13"

**Reproducible code example** 
*If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!*
2

I found a workaround, but this is still a bug.

The editor has to receive at least one successful response from your app before it will allow you to mutate state in the server block.

3

Hey @rdonn, so Builder.isServer is never true while editing, it means that the jsCode is being run in a server environment and live editing has to be on the client side, what you can do is test for Builder.isEditing

if (Builder.isEditing || Builder.isServer) {

}

I find myself doing things similar to this code

if (state.done)  {
  // do stuff then 
  state.done = true;
}

State is preserved between server and client runs, so the logic I need to run while editing or previewing will run without waiting for publish and SSR to run.

4

All of the output i provided was in getServerSideProps in a nextjs environment. I can one hunder percent guarentee i am able to pass server side props and use builder state on the server while editing.

I am using the state from isServer to query on prem entities server side with getAsyncProps. I have been able to use the editor and rely on the code in isServer for a while now while editing exiting documents.

This is the bug:

Builder.io requires at least one component be placed in the editor at least one time for the isServer block to run. This is not a reasonable expectation for consumers, especially if you advertise targeting wildcard urls.

Reproduction is simple. Create a new page, add js code to mutate state server side, throw an error in your getServerSideProps if it is not defined. The page will never render in the editor.

1 Like
5

Facing something similar in here. Any news on this?