'jsonforms' or 'dispatch' couldn't be injected. Are you within JSON Forms?

General
1

Hello, thanks for your hard work.
Unfortunately I’m having trouble migrating to jsonforms 3.0.0.
My project is on nuxtjs (2). Here are my dependencies:

"@jsonforms/core": "3.0.0",
"@jsonforms/vue": "3.0.0",
"@jsonforms/vue2": "3.0.0",
"@jsonforms/vue2-vanilla": "3.0.0",
"nuxt": "2.16.0",
"vue": "2.7.0",
"vue-template-compiler": "2.7.0",

call jsonforms

<template>
    <div data-vue-component-name="FormBuilder">
        <JsonForms1
            ref="json-forms"
            :key="renderId"
            :data="value"
            :renderers="renderers"
            :schema="schema"
            :uischema="uiSchema"
            :ajv="ajv"
            :readonly="readonly"

            @change="$emit('change', $event)"
        />
    </div>
</template>

I am getting the following errors

[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
'jsonforms' or 'dispatch' couldn't be injected. Are you within JSON Forms?

I also had to enter the following in the nuxt config

build: {
        extend(config) {
            config.module.rules.push({
                test: /\.js$/,
                exclude: {
                    and: [
                        /node_modules/,
                    ],
                    not: [
                        /@jsonforms/,
                    ],
                },
                use: {
                    loader: 'babel-loader',
                },
            });
            config.module.rules.push({
                test: /\.ajv$/,
                use: {
                    loader: 'babel-loader',
                },
            });
        },
    },

After that my project started to run but displays the above errors.

I also removed all my custom renderers from the array to exclude them from possible problems, but the error remained, only after I hid json-forms via v-if=“false” the error disappeared (oddly enough :slight_smile: )

I previously had jsonforms version 2.5.* which worked fine, I decided to upgrade to the new version to get the “i18n” prop to replace “is a required property” under my inputs, if there is a way to do this without going to third version please let me know.

2

Hi!

Sadly I don’t have experience with Nuxt, so I’m not familiar with its specialties.

Here are my dependencies: […]

You should not have @jsonforms/vue AND @jsonforms/vue2. They are mutually exclusive with @jsonforms/vue being based on Vue 3 and @jsonforms/vue2 being based on Vue 2.

I could imagine that the errors are coming from this.

if there is a way to do this without going to third version please let me know.

I would definitely recommend staying up to date with JSON Forms.

In JSON Forms 2.5 the main two ways to customize the error messages are:

  • Use ajv-errors. Note that for JSON Forms 2.5 we used Ajv v6, therefore you need to use ajv-errors v1. You can use the createAjv function exported from @jsonforms/core to create your Ajv instance, customize it with ajv-errors and then pass it as a prop to JsonForms.
  • Use custom renderers