Custom renderers not rendering

General
1

Hi,

Thanks for the great tool. We are currently using it in order to make a jekyll template (and its _config.yml file) correspond to a form. We use Vue, vue-vanilla and renderers of our own.

We are experiencing some troubles using our custom renderers in a Firebase environment.
Everything is working great when we run using

npm run serve

But when we build and use the firebase emulator, a problem arises. None of our custom renderer is displayed, no error message in the console, no “No applicable renderer” message.

We have to use the Vue render functions to make it work. For a basic example, it gives something like this :

const controlRenderer = defineComponent(
  ...
  render(){
      const controlWrapperNode = createVNode(ControlWrapper, {
              'v-bind':this.controlWrapper,
              'styles': this.styles,
              'isFocused': this.isFocused,
              appliedOptions: this.appliedOptions
          }
      )
  
      const textFieldNode = createVNode(VTextField, {
        'id': this.control.id + '-input',
        'disabled':!this.control.enabled,
        'autofocus': this.appliedOptions.focus,
        'placeholder': this.appliedOptions.placeholder,
        'error': this.control.required,
        'error-messages': this.control.errors,
        'onFocus': () => this.isFocused = true,
        'onBlur': () => this.isFocused = false,
        'onChange': (event) => this.handleChange(this.control.path, event.target.value),
        label: this.label ? this.label : this.control.uischema.label
      });
  
      return h(controlWrapperNode,
          [
            textFieldNode
          ]);
    }
}

It’s pretty ugly to my opinion. Moreover, we’re not facing this problem with the vue vanilla renderers, which work great on the Firebase emulator.

We think that our problem comes from our config, but we don’t know where :

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "node",
      "vuetify"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "noImplicitAny": false,
    "lib": [
      "es6",
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Do you have any idea from where the problem comes ?

(Sorry for my english which is not that good).

2

Hi @AntoineRefpro,

We had similar problems in the past when the @vue/compiler-sfc / vue-template-compiler was out of sync with vue. I would like to suggest to double check your (dev)dependencies there.

3

Thanks @sdirix for the very quick answer.

We’ve this config I just updated :

{
  "dependencies": {
    "@vue/compiler-sfc": "^3.2.45",
    "vue": "^3.2.39",
  }
}

Everything seems ok, but the problem remains the same.

We’ll have a look around, but we may used the render functions options to solve that problem.

4

Can you check whether this is the same issue and if yes, whether the mentioned fix also works for you? Form Control for Array Element disappears when NODE_ENV = production in Vue 3 using vue-vanilla renderers · Issue #2077 · eclipsesource/jsonforms · GitHub

5

It’s the same and it solves my issue. Thank you very much !

I put the entry (tester + renderer) in the computed property :

computed: {
    entry() {
      return {
        renderer: controlRenderer,
        tester: rankWith(5, isEnumControl)
      } as JsonFormsRendererRegistryEntry;
    }
  }

Then I export the entry the following way :

import  SelectControlRenderer from "./CustomControlRenderer/SelectControlRenderer.vue";

export const customControlRenderers = [
     SelectControlRenderer.computed?.entry(),
]

Everything works fine then.

6

Hi @AntoineRefpro,

Great that you found a solution. However I don’t think that you need to add it to the computed property. Instead I would like to suggest to create the entry in the file which imports the renderer.

7

Hi @sdirix,

You’re right. It’s better this way.