Unexpected token in JsonForms custom-renderer props declaration

Question

I am following an example from here to create a custom renderer for JsonForms using Vue: https://jsonforms.io/api/vue/vue/index.html

However, when I include this sample in my .vue file within the script tags. I get an error UnexpectedToken immediately after the props declaration. Right after the generic type definition and the brackets for the parameters (the func has no parameters)

Here is my TS code:

<script lang="ts">
  import { ControlElement } from '@jsonforms/core';
  import { RendererProps, rendererProps, useJsonFormsControl } from '@jsonforms/vue';
  import { defineComponent } from 'vue';

  import { rankWith, scopeEndsWith, JsonFormsRendererRegistryEntry } from '@jsonforms/core';

  const CustomCheckboxRenderer = defineComponent({
    name: 'custom-checkbox-renderer',
    props: {
      ...rendererProps<ControlElement>(), <---- Error on this line immediately after the >
    },
    emits: ['input'],
    setup(props: RendererProps<ControlElement>) {
      return useJsonFormsControl(props);
    },
    methods:{
      onChange(event: Event){
        this.handleChange(this.control.path, (event.target as HTMLInputElement).checked);
      }
    }
  });
  export default CustomCheckboxRenderer;

  export const entry: JsonFormsRendererRegistryEntry = {
    renderer: CustomCheckboxRenderer,
    tester: rankWith(3, scopeEndsWith('tter')),
}
</script>

And here is the error message:

ERROR in [eslint]
C:\Projects\GH\app\src\renderers\MyCheckboxRenderer.vue
  26:39  error  Parsing error: Unexpected token (11:39)

✖ 1 problem (1 error, 0 warnings)

I belive it may be an issue with the eslint configuration. I have attempted to use some different parsers, but it causes issues to crop up throughout the rest of my project. My eslint configuration is here

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Answer 1

You need to use a custom parser for Typescript indeed: @typescript-eslint/parser

Here is an example from eslint.vue: how to use a custom eslint parser?

parserOptions: {
  parser: '@typescript-eslint/parser'
},

I also recommend reading this SoF thread to understand the difference between parser and parseOption.parser

Answer 2

I managed to find the issue.

The project that this was implemented in had Vue set up for JS only.

I used the vue CLI to add typescript using vue add typescript. And after fixing some errors that came with that change. The vue component built successfully.