Unexpected token upon registering props

1

I am following the examples for Vue3 renderers. And I’m running into an issue that is preventing me from building my application. When registering the RendererProps in my component, the linter is giving an ‘Unexpected Token’ after the call to the spread of rendererProps.

  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>(),
    },
    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')),
}

I’m getting an error on the props line:

Module parse failed: Unexpected token (11:39)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
|     name: 'custom-checkbox-renderer',
|     props: {
>       ...rendererProps<ControlElement>()
|     },
|     emits: ['input'],

I am using the following parser: @babel/eslint-parser

Any input would be greatly appreciated. Thankyou

2

Hi @Droxx,

Is your environment correctly set up for Typescript? Your build seems to fail with the Typescript generic.

3

Hi @sdirix. That was precicely the issue. The project I was working in was only configured for JS. I used the vue CLI to add typescript, and the component then built.

Thankyou