Getting an this error, 'jsonforms' or 'dispatch' couldn't be injected. Are you within JSON Forms?

General
1

Hello

I am trying to use jsonforms in a flask python app which is not a SPA and don’t using SFC. Iam getting this error 'jsonforms' or 'dispatch' couldn't be injected. Are you within JSON Forms?

This is app.js

import { JsonForms } from '@jsonforms/vue2';
import { vanillaRenderers } from '@jsonforms/vue2-vanilla';
import Vue from 'vue/dist/vue.esm';

const schema = {
  properties: {
    name: {
      type: "string",
      minLength: 1,
      description: "The task's name"
    },
    description: {
      title: "Long Description",
      type: "string"
    },
    done: {
      type: "boolean"
    },
    dueDate: {
      type: "string",
      format: "date",
      description: "The task's due date"
    },
    rating: {
      type: "integer",
      maximum: 5
    },
    recurrence: {
      type: "string",
      enum: ["Never", "Daily", "Weekly", "Monthly"]
    },
    recurrenceInterval: {
      type: "integer",
      description: "Amount of days until recurrence"
    }
  }
};

const uischema = {
  type: "HorizontalLayout",
  elements: [
    {
      type: "VerticalLayout",
      elements: [
        {
          type: "Control",
          scope: "#/properties/name"
        },
        {
          type: "Control",
          scope: "#/properties/description",
          options: {
            multi: true
          }
        },
        {
          type: "Control",
          scope: "#/properties/done"
        }
      ]
    },
    {
      type: "VerticalLayout",
      elements: [
        {
          type: "Control",
          scope: "#/properties/dueDate"
        },
        {
          type: "Control",
          scope: "#/properties/rating"
        },
        {
          type: "Control",
          scope: "#/properties/recurrence"
        },
        {
          type: "Control",
          scope: "#/properties/recurrenceInterval"
        }
      ]
    }
  ]
};

new Vue({
  el: '#form-wrapper',
  components: {
    JsonForms,
  },
  data() {
    return {
      // freeze renderers for performance gains
      renderers: Object.freeze(vanillaRenderers),
      data: {
        name: 'Send email to Adrian',
        description: 'Confirm if you have passed the subject\nHereby ...',
        done: true,
        recurrence: 'Daily',
        rating: 3,
      },
      schema,
      uischema,
    };
  },
  methods: {
    onChange(event) {
      this.data = event.data;
    },
  },
  provide() {
    return {
      styles: myStyles,
    };
  },
});

index.html

    {% raw %}
    <div id="register-form">
        <json-forms
        v-bind:data="data"
        v-bind:renderers="renderers"
        v-bind:schema="schema"
        v-bind:uischema="uischema"
        @change="onChange"
      />
    </div>
    {% endraw %}

this is package.json

  "@jsonforms/vue2": "^3.0.0",
  "@jsonforms/vue2-vanilla": "^3.0.0",
  "vue": "^2.7.14",

From the debug statements, dispatch-renderer component does seem to receive the jsonforms and dispatch. Not sure why inject is failing

* s {_uid: 2, _isVue: true, __v_skip: true, _scope: e, $options: {…}, …}

1. $attrs: (...)
2. $children: []
3. $createElement: ƒ (t,r,n,o)
4. $el: comment
5. $listeners: (...)
6. $options: {parent: s, _parentVnode: e, propsData: {…}, _parentListeners: undefined, _renderChildren: undefined, …}
7. $parent: s {_uid: 1, _isVue: true, __v_skip: true, _scope: e, $options: {…}, …}
8. $refs: {}
9. $root: Ep {_uid: 0, _isVue: true, __v_skip: true, _scope: e, $options: {…}, …}
10. $scopedSlots: {$stable: true, $key: undefined, $hasNormal: false}
11. $slots: {}
12. $vnode: e {tag: 'vue-component-2-dispatch-renderer', data: {…}, children: undefined, text: undefined, elm: comment, …}
13. dispatch: (...)
14. jsonforms: (...)
15. __v_skip: true
16. _c: ƒ (t,r,n,o)
17. _computedWatchers: {determinedRenderer: e}
18. _data: {__ob__: e}
19. _directInactive: false
20. _events: {}
21. _hasHookEvent: false
22. _inactive: null
23. _isBeingDestroyed: false
24. _isDestroyed: false
25. _isMounted: true
26. _isVue: true
27. _props: {…}
28. _provided: {jsonforms: {…}, dispatch: ƒ}

Thank you.

2

Hi @vidya-ram ,
I noticed that your excerpt from the package.json does not contain a dependency to @jsonforms/core. However, this is a peer dependency of @jsonforms/vue2 and must be explicitly configured. Is this missing in your package.json or just in your snippet?
If it is missing, please try adding it and see if that solves the problem before we investigate further.

3

Thanks for the quick response.

I missed mentioning it in the snippet earlier but I have installed it @jsonforms/core": "^3.0.0

4

Hi @vidya-ram,

On a first glance everything looks fine. However I have no experience with integrating Vue like this as a single standalone element, so I’m not sure whether something needs to be adapted here.

The error indicates that the inject within the vanillaRenderers does not work. The jsonforms injection is provided by the json-forms component which you are clearly using.

You might want to look at our Vue2 seed or the JSON Forms Vue2 Vuetify Webcomponent community build

5

Thanks, will check JSON Forms Vue2 Vuetify.