Vue Error: TypeError: Cannot read properties of undefined (reading 'code')

[Parth8598]

Hi I got the error while using the package of jsonforms with vue2 seed. Also I've used vue2 with laravel 5.8.

Encountering a TypeError: Cannot read properties of undefined (reading 'code') error in Vue 2 application using JSONForms when processing dynamic form data.

Below are my package.json file:
{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development NODE_OPTIONS='--openssl-legacy-provider' node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development NODE_OPTIONS='--openssl-legacy-provider' node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production NODE_OPTIONS='--openssl-legacy-provider' node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "storybook": "start-storybook -p 9000" }, "devDependencies": { "axios": "^0.19", "bootstrap": "^4.1.0", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.13", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.6.14", "vue-template-compiler": "^2.6.14" }, "dependencies": { "@jsonforms/core": "^2.4.0", "@jsonforms/vue2": "^2.4.0", "@jsonforms/vue2-vanilla": "^2.4.0", "@vue/composition-api": "^1.7.2", "ajv": "^6.12.6", "ajv-formats": "^1.5.1", "core-js": "^3.6.5", "regenerator-runtime": "^0.14.1", "tslib": "^2.8.1", "uuid": "^9.0.0" } }
Below my component code:
`

Loading form schema...

<button
v-for="tab in tabs"
:key="tab.id"
:class="['tab-button', { active: activeTab === tab.id }]"
@click="switchTab(tab.id)"
>
{{ tab.label }} 1

        <!-- Tab Content -->
        <div class="tab-content">
            <!-- All Fields Tab -->
            <div v-if="activeTab === 'all'" class="tab">
                <h3>All Fields Tab</h3>
                
                <div v-if="isSchemaReady && uiSchema" class="form-container">
                    <json-forms 
                        v-bind:uischema="uiSchema"
                        v-bind:schema="effectiveSchema"
                        v-bind:ajv="schemaValidator"
                        v-bind:renderers="renderers"
                        v-bind:data="data"
                        @change="onChange"
                    />
                </div>
                
                <div v-else class="no-form-message">
                    <p>No form available. Check console for errors.</p>
                </div>
            </div>

            <!-- Required Fields Tab -->
            <div v-if="activeTab === 'required'" class="tab">
                <h3>Required Fields Tab</h3>
                
                <div v-if="!requiredUiSchema" class="fallback-message">
                    <p>Required fields view is not available. Showing all fields instead.</p>
                </div>
                
                <div v-if="isSchemaReady && (requiredUiSchema || uiSchema)" class="form-container">
                    <json-forms 
                        v-bind:uischema="requiredUiSchema || uiSchema"
                        v-bind:schema="effectiveSchema"
                        v-bind:ajv="schemaValidator"
                        v-bind:renderers="renderers"
                        v-bind:data="data"
                        @change="onChange"
                    />
                </div>
                
                <div v-else class="no-form-message">
                    <p>No form available. Check console for errors.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script> import { generateDefaultUISchema } from '@jsonforms/core'; import { JsonForms } from '@jsonforms/vue2'; import { cloneDeep } from "lodash"; import { vanillaRenderers } from '@jsonforms/vue2-vanilla'; import Ajv from 'ajv'; import addFormats from "ajv-formats"; import { entry as arrayListEntry } from './Custom/ArrayList.vue'; export default { name: 'JsonFormsComponent', components: { JsonForms, }, data() { return { data: {}, ID_SUFFIX: "/Augmented", schemaValidator: null, renderers: [], uiSchema: null, requiredUiSchema: null, activeTab: 'all', tabs: [ { id: 'all', label: 'All Fields' }, { id: 'required', label: 'Required Fields' } ], loadedSchema: null }; }, methods: { cleanUpSchemaForPresentation(schema) { if (!schema || typeof schema !== 'object') { return schema; } // For simplified schemas, we don't need aggressive cleaning // Just ensure we have a valid schema structure const clonedSchema = cloneDeep(schema); // Only clean problematic properties if they exist if (clonedSchema.allOf) { delete clonedSchema.allOf; } if (clonedSchema.anyOf) { delete clonedSchema.anyOf; } if (clonedSchema.oneOf) { delete clonedSchema.oneOf; } // Ensure we have a valid ID if (!clonedSchema.$id) { clonedSchema.$id = this.generateUuid(); } return clonedSchema; }, generateUISchema(schema) { return generateDefaultUISchema(this.cleanUpSchemaForPresentation(schema)); }, generateUuid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { const r = Math.random() * 16 | 0; const v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }, generateRequiredUISchema(schema) { try { const clonedSchema = cloneDeep(schema); const requiredSchema = this.filterRequiredFields(clonedSchema); const uiSchema = generateDefaultUISchema(requiredSchema); return uiSchema; } catch (error) { console.error('Error generating required UI schema:', error); // Fallback to main UI schema if there's an error return this.uiSchema; } }, filterRequiredFields(schema) { if (!schema || typeof schema !== 'object') { return schema; } const filteredSchema = { ...schema }; if (schema.properties) { const requiredProps = schema.required || []; const filteredProperties = {}; Object.keys(schema.properties).forEach(propName => { const prop = schema.properties[propName]; if (requiredProps.includes(propName) || this.hasRequiredFields(prop)) { filteredProperties[propName] = this.filterRequiredFields(prop); } }); filteredSchema.properties = filteredProperties; filteredSchema.required = requiredProps.filter(propName => filteredProperties.hasOwnProperty(propName) ); } return filteredSchema; }, hasRequiredFields(schema) { if (!schema || typeof schema !== 'object') { return false; } if (schema.required && schema.required.length > 0) { return true; } if (schema.properties) { return Object.values(schema.properties).some(prop => this.hasRequiredFields(prop)); } return false; }, switchTab(tabId) { this.activeTab = tabId; }, initializeSchemaValidator() { this.schemaValidator = new Ajv({ allErrors: true, verbose: true, strict: false, validateSchema: false, }); addFormats(this.schemaValidator); }, initializeRenderers() { // Try putting custom renderer at the end for higher priority this.renderers = [...vanillaRenderers, arrayListEntry]; this.renderers = Object.freeze(this.renderers); }, onChange(e) { try { // Ensure the event object is valid before accessing properties if (e && typeof e === 'object' && e.data !== undefined) { this.data = e.data; } else { console.warn('Invalid change event received:', e); this.data = {}; } } catch (error) { console.error('Error in onChange handler:', error); this.data = {}; } }, loadHerbSchema() { try { // Try to load from the correct path first let response = fetch('/storage/herb.json'); if (!response.ok) { // Fallback to test schema if herb.json fails throw new Error('HTTP error! status: '+response.status); } const schema = response.json(); return schema; } catch (error) { console.error('Error loading schema:', error); } }, getValidationErrors() { if (!this.schemaValidator || !this.loadedSchema || !this.data) { return []; } try { this.schemaValidator.validate(this.loadedSchema, this.data); return this.schemaValidator.errors || []; } catch (error) { console.error('Error getting validation errors:', error); return []; } }, getRequiredFieldErrors() { const errors = this.getValidationErrors(); return errors.filter(error => { // Filter for errors that indicate missing required fields return error.keyword === 'required' || (error.keyword === 'minLength' && error.params && error.params.limit === 0) || (error.keyword === 'minItems' && error.params && error.params.limit > 0); }); } }, mounted() { this.initializeSchemaValidator(); this.initializeRenderers(); // Load schema from herb.json this.loadedSchema = this.loadHerbSchema(); if (this.loadedSchema) { try { // Clean and prepare the schema const cleanedSchema = this.cleanUpSchemaForPresentation(this.loadedSchema); // Ensure the schema has properties if (!cleanedSchema.properties || Object.keys(cleanedSchema.properties).length === 0) { cleanedSchema.properties = { fallback_message: { type: 'string', title: 'Schema Information', description: 'The schema was loaded but contains no displayable properties', readOnly: true } }; cleanedSchema.required = []; } // Generate UI schema try { this.uiSchema = this.generateUISchema(cleanedSchema); } catch (error) { console.error('Error generating UI schema:', error); // Create a simple fallback UI schema this.uiSchema = { type: 'VerticalLayout', elements: Object.keys(cleanedSchema.properties || {}).map(propName => ({ type: 'Control', scope: `#/properties/${propName}` })) }; } // Generate required UI schema try { this.requiredUiSchema = this.generateRequiredUISchema(cleanedSchema); } catch (error) { console.error('Error generating required UI schema:', error); // Use main UI schema as fallback for required fields this.requiredUiSchema = this.uiSchema; } } catch (error) { console.error('Error generating schemas in mounted:', error); } } else { console.error('Failed to load schema'); } }, computed: { effectiveSchema() { // Use loaded schema from herb.json const schema = this.loadedSchema; return schema; }, isSchemaReady() { return this.loadedSchema && Object.keys(this.loadedSchema ).length > 0 && this.uiSchema; }, requiredFieldsCount() { const schema = this.loadedSchema; if (!schema || !schema.properties) { return 0; } let count = 0; const errors = this.getValidationErrors(); count = errors.length; return count; } }, }; </script>`

Requirements

• I don't want to upgrade the packages version of vue, vue-template-compiler & laravel-mix.

Please help me figure out this error.