jsonforms

jsonforms copied to clipboard

Describe the bug

After upgrading to 3.0.0-alpha.2 it's no longer possible to provide a custom AJV instance for jsonforms. Template: <json-forms :data="data" :renderers="renderers" :schema="schema" :uischema="uischema" :ajv="customAjv" @change="onChange" />

To create the new Ajv instance I use the createAjv() function. The jsonforms element is not rendering and produces the error shown in the attached image.

Uncaught SyntaxError: Identifier 'schema1' has already been declared

Expected behavior

It should be possible to provide a custom Ajv instance to change or add formats. Is there another way to add my own format, or change the format for time, without providing a custom Ajv instance?

Steps to reproduce the issue

1. Download the jsonforms-vue-seed project
2. Change versions in package.json to 3.0.0-alpha.2
3. Provide custom Ajv instance with createAjv() in App.vue
4. npm run serve the project and open in browser
5. See error in console

Screenshots

No response

In which browser are you experiencing the issue?

Version 95.0.4638.69 (Official Build) (64-Bit)

Framework

Vue 3

RendererSet

Vanilla

Additional context

No response

Hi @freddie-95, thanks for the report!

I can reproduce the issue. I don't know yet where this problem comes from and whether this is a JSON Forms issue or a problem of AJV v8.

There is a workaround which works for me: It seems the auto-magic reactivity of Vue is at least interfering in some way here. So for me it works by just not making Ajv reactive, i.e. in the app component just assign ajv to a field but not to data, e.g.

  data() {
    // non-reactive ajv
    this.ajv = createAjv();
    // reactive data below
    return {
      // freeze renderers for performance gains
      renderers: Object.freeze(renderers),
      data: {
        name: "Send email to Adrian",
        description: "Confirm if you have passed the subject\nHereby ...",
        done: true,
        recurrence: "Daily",
        rating: 3,
      },
      schema,
      uischema,
    };
  },

This way you can still hand it over to json-forms in your template.

It seems that AJV and Vue reactivity just don't combine well and not using reactivity is the way to go. Therefore I'll close this issue. Feel free to reopen if you disagree.