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

**URL:** <https://jsonforms.discourse.group/t/getting-an-this-error-jsonforms-or-dispatch-couldnt-be-injected-are-you-within-json-forms/1379>\
**Category:** General\
**Created:** [March 10, 2023, 9:06am UTC](https://jsonforms.discourse.group/t/getting-an-this-error-jsonforms-or-dispatch-couldnt-be-injected-are-you-within-json-forms/1379 "2023-03-10T09:06:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vidya-ram](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/vidya-ram/32/672_2.png) [@vidya-ram](https://jsonforms.discourse.group/u/vidya-ram)\
**Post date:** [March 10, 2023, 9:06am UTC](https://jsonforms.discourse.group/t/getting-an-this-error-jsonforms-or-dispatch-couldnt-be-injected-are-you-within-json-forms/1379/1 "2023-03-10T09:06:30Z")

</div>

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

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

```auto
    {% 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

```auto
  "@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

```auto
* 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.

---

<div class="post-metadata">

**Author:** ![lucas-koehler](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/lucas-koehler/32/336_2.png) [@lucas-koehler](https://jsonforms.discourse.group/u/lucas-koehler)\
**Post date:** [March 10, 2023, 11:38am UTC](https://jsonforms.discourse.group/t/getting-an-this-error-jsonforms-or-dispatch-couldnt-be-injected-are-you-within-json-forms/1379/2 "2023-03-10T11:38:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vidya-ram](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/vidya-ram/32/672_2.png) [@vidya-ram](https://jsonforms.discourse.group/u/vidya-ram)\
**Post date:** [March 10, 2023, 11:51am UTC](https://jsonforms.discourse.group/t/getting-an-this-error-jsonforms-or-dispatch-couldnt-be-injected-are-you-within-json-forms/1379/3 "2023-03-10T11:51:40Z")

</div>

Thanks for the quick response.

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

---

<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:** [March 10, 2023, 4:05pm UTC](https://jsonforms.discourse.group/t/getting-an-this-error-jsonforms-or-dispatch-couldnt-be-injected-are-you-within-json-forms/1379/4 "2023-03-10T16:05:01Z")

</div>

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](https://github.com/eclipsesource/jsonforms-vue-seed/tree/vue2) or the J[SON Forms Vue2 Vuetify Webcomponent community build](https://github.com/kchobantonov/jsonforms-vuetify-webcomponent)

---

<div class="post-metadata">

**Author:** ![vidya-ram](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/vidya-ram/32/672_2.png) [@vidya-ram](https://jsonforms.discourse.group/u/vidya-ram)\
**Post date:** [March 11, 2023, 10:50am UTC](https://jsonforms.discourse.group/t/getting-an-this-error-jsonforms-or-dispatch-couldnt-be-injected-are-you-within-json-forms/1379/5 "2023-03-11T10:50:02Z")

</div>

Thanks, will check JSON Forms Vue2 Vuetify.