'showIf' is not effective after configuration

Technical Questions
1

local: node:22.3.0 nextjs:14.1.1 sdk-react:1.0.31
prod: FROM node:18.17.0-alpine AS base

When running on localhost, the code showIf: options => options.get('col') === 'other' works correctly. However, when deployed to the testing or production environment, it doesn’t work despite the code being the same. Is there a specific setting that needs to be configured?

{
      name: 'col',
      type: 'string',
      localized: false,
      enum: ['1', 'other'],
      defaultValue: '1',
    },
    {
      name: 'colInput',
      type: 'string',
      localized: false,
      defaultValue: '',
      showIf: options => options.get('col') === 'other',
    },
2

It looks like you’re encountering an issue where the showIf function works correctly on your local development environment but fails when deployed to a testing or production environment. This discrepancy can arise due to differences in environments, such as how JavaScript is processed or differences in the builder SDK or runtime environments.

Here are some steps and considerations that might help you identify and resolve the issue:

Step-by-Step Debugging and Resolution

  1. Check Node Version Compatibility:
    Ensure that both local and production environments are using compatible Node.js versions. Since there is a significant version difference (22.3.0 locally and 18.17.0 in production), this might cause inconsistencies. Try aligning the Node.js versions and see if this resolves the issue.

    • Update your Dockerfile to use Node.js 22.3.0 for production:
    FROM node:22.3.0-alpine AS base

  2. Verify SDK and Configuration:
    Ensure that the builder SDK and configurations are consistent across environments. Here’s how you can debug and ensure configurations are correctly aligned.

  3. Check Environment Variables:
    Verify that you have the correct environment variables set in all environments. Sometimes the build process or runtime environment might have different configurations which can cause inconsistencies.

  4. Add Debug Logs in the showIf Function:
    Add console logs to the showIf function to debug what’s being passed to the function in the production environment:

    {
  name: 'colInput',
  type: 'string',
  localized: false,
  defaultValue: '',
  showIf: options => {
    console.log('showIf options in production:', options);
    console.log('showIf options.get("col"):', options.get('col'));
    return options.get('col') === 'other';
  },
},

    After deploying, check the console logs in your production environment to see what is being logged.

  5. Inspect Build Output and Bundling:
    Ensure that the showIf function is not being altered or stripped out during the build process. Check the resulting JS bundles to ensure the code remains intact.

Alternative Approach

If the above steps don’t resolve the issue, consider using a more indirect approach such as using state or context to maintain options and conditionally display components.

Example Using State Management

  1. Using State:

    import React, { useState } from 'react';

const MyComponent = () => {
  const [col, setCol] = useState('1');
  const [colInput, setColInput] = useState('');

  return (
    <div>
      <select onChange={(e) => setCol(e.target.value)} value={col}>
        <option value="1">1</option>
        <option value="other">Other</option>
      </select>
      {col === 'other' && (
        <input
          type="text"
          value={colInput}
          onChange={(e) => setColInput(e.target.value)}
        />
      )}
    </div>
  );
};

export default MyComponent;

  2. Register the Component:

    import { Builder, withChildren } from '@builder.io/react';
import MyComponent from './MyComponent'; // Adjust the import path

Builder.registerComponent(withChildren(MyComponent), {
  name: 'MyComponent',
  inputs: [
    {
      name: 'col',
      type: 'string',
      enum: ['1', 'other'],
      defaultValue: '1',
    },
    {
      name: 'colInput',
      type: 'string',
      defaultValue: '',
    },
  ],
});

Conclusion

Following these debugging steps will help you identify why the behavior differs between environments. Aligning the Node.js versions, adding debug logs, and ensuring consistent configurations should help resolve the issue.

If the issue persists, consider reaching out to Builder.io support with detailed logs and the specific discrepancies observed between local and production environments for further assistance.

3

I have changed the local Node.js version to 18, and it works fine locally. However, it doesn’t work after deployment.”

 showIf: options => {
        console.log('showIf options in production:', options)
        console.log('showIf options.get("btn"):', options.get('btn'))
        return options.get('btn') === true
      },

prod console

fs.js:4 Evaluation error: SyntaxError: Unexpected token '=>'
    at new Function (<anonymous>)
    at safeEvaluate (main.2b9a90dc.chunk.js:541:136)
    at 233.b9216e5b.chunk.js:197:34152
    at Array.filter (<anonymous>)
    at FieldsForm_FieldsFormEditor.render (233.b9216e5b.chunk.js:197:33870)
    at allowStateChanges (216.daddc10f.chunk.js:30:14474)
    at 216.daddc10f.chunk.js:417:1276
    at trackDerivedFunction (216.daddc10f.chunk.js:30:10780)
    at Reaction2.track (216.daddc10f.chunk.js:45:1548)
    at FieldsForm_FieldsFormEditor.reactiveRender [as render] (216.daddc10f.chunk.js:417:1185) in return (function e=>(console.log("showIf options in production:",e),console.log('showIf options.get("btn"):',e.get("btn")),!0===e.get("btn"))).apply(this, arguments)
4

Hello @RadisLuo,

Regrettably, we are not able to reproduce this issue on production. We tested this on Vercel deployment and it seems to work fine.

We suspect the issue could be specific to your deployment environment. You can try using the function instead of the arrow function

example:

      showIf: function(options) {
        return options.get("btn");
      },

Thanks,

5

I had this same problem, still not sure the root cause, but the above solution fixed it for me

6

We’re also seeing this issue, only in production deploys. Any direction or help would be appreciated.

{
      name: 'hasButton',
      friendlyName: 'Incude Button',
      type: 'boolean',
      defaultValue: false,
      helperText: 'Add an optional button.',
    },
    {
      name: 'buttonInfo',
      friendlyName: 'Button Info',
      type: 'object',
      showIf: (options) => options.get('hasButton'),
      defaultValue: {
        copy: 'Button Copy',
        href: '/',
      },
      subFields: [
        {
          name: 'copy',
          friendlyName: 'Button Copy',
          type: 'string',
          required: true,
        },
        {
          name: 'href',
          friendlyName: 'href',
          type: 'string',
          required: true,
        },
      ],
    },

Toggling the hasButton prop does not update the Visual Editor ui to reveal the conditional props.

I don’t know if it matters, but we recently upgraded to Gen2 SDK.