# Custom renderers not rendering

**URL:** <https://jsonforms.discourse.group/t/custom-renderers-not-rendering/1250>\
**Category:** General\
**Created:** [January 20, 2023, 1:33pm UTC](https://jsonforms.discourse.group/t/custom-renderers-not-rendering/1250 "2023-01-20T13:33:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![AntoineRefpro](https://avatars.discourse-cdn.com/v4/letter/a/d07c76/32.png) [@AntoineRefpro](https://jsonforms.discourse.group/u/AntoineRefpro)\
**Post date:** [January 20, 2023, 1:33pm UTC](https://jsonforms.discourse.group/t/custom-renderers-not-rendering/1250/1 "2023-01-20T13:33:17Z")

</div>

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

```auto
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 :

```auto
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 :

```auto
{
  "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).

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [January 20, 2023, 2:50pm UTC](https://jsonforms.discourse.group/t/custom-renderers-not-rendering/1250/2 "2023-01-20T14:50:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AntoineRefpro](https://avatars.discourse-cdn.com/v4/letter/a/d07c76/32.png) [@AntoineRefpro](https://jsonforms.discourse.group/u/AntoineRefpro)\
**Post date:** [January 20, 2023, 4:04pm UTC](https://jsonforms.discourse.group/t/custom-renderers-not-rendering/1250/3 "2023-01-20T16:04:00Z")

</div>

Thanks @sdirix for the very quick answer.

We’ve this config I just updated :

```auto
{
  "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.

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [January 23, 2023, 9:29am UTC](https://jsonforms.discourse.group/t/custom-renderers-not-rendering/1250/4 "2023-01-23T09:29:16Z")

</div>

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](https://github.com/eclipsesource/jsonforms/issues/2077)

---

<div class="post-metadata">

**Author:** ![AntoineRefpro](https://avatars.discourse-cdn.com/v4/letter/a/d07c76/32.png) [@AntoineRefpro](https://jsonforms.discourse.group/u/AntoineRefpro)\
**Post date:** [February 6, 2023, 10:57am UTC](https://jsonforms.discourse.group/t/custom-renderers-not-rendering/1250/5 "2023-02-06T10:57:45Z")

</div>

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

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

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

```

Then I export the entry the following way :

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

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

```

Everything works fine then.

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [February 9, 2023, 7:27pm UTC](https://jsonforms.discourse.group/t/custom-renderers-not-rendering/1250/6 "2023-02-09T19:27:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![AntoineRefpro](https://avatars.discourse-cdn.com/v4/letter/a/d07c76/32.png) [@AntoineRefpro](https://jsonforms.discourse.group/u/AntoineRefpro)\
**Post date:** [February 10, 2023, 12:27pm UTC](https://jsonforms.discourse.group/t/custom-renderers-not-rendering/1250/7 "2023-02-10T12:27:26Z")

</div>

Hi @sdirix,

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