v-form error: Cannot read properties of undefined (reading 'meta')

[azrikahar]

Describe the Bug

When navigating to a page with <v-form> (content item, any collection's data model page), we will get an error:

TypeError: Cannot read properties of undefined (reading 'meta')

chrome_TItDX9GdNp.mp4

Seems like this is related to #15144, where now fieldMaps can be an empty object at start when values.value has no keys:

directus/app/src/components/v-form/v-form.vue

Line 285 in a4f6529

if (Object.keys(values.value).length === 0) return {};

However since fieldNames still is an array of field names, accessing fieldMaps[fieldName].meta will trigger this error as fieldmaps[fieldName] does not exist yet.

A quick fix I tried was to ensure fieldNames use a similar logic and return an empty array when values.value has no keys, as such:

			const fieldNames = computed(() => {
+				if (Object.keys(values.value).length === 0) return [];
				return fieldsInGroup.value.map((f) => f.field);
			});

but I'm not sure could there be a better fix at the moment. cc @br41nslug

Seems like this is causing the options in field creation panel to not appear at all, so likely not a feasible solution.

To Reproduce

1. Go to Settings > Data Model.
2. Click on a collection to view it's data model, which includes a <v-form> showing the fields.

Alternatively, create a new collection so that the same error will happen when we are redirected to the new collection's data model page with <v-form>.

Errors Shown

(This error was taken in dev build. Production builds should have minified variation of this error log)

• Screenshot:

  

• Text:

  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'meta')
   at v-form.vue:12:32
   at renderList (runtime-core.esm-bundler.js:2884:22)
   at Proxy._sfc_render (v-form.vue:76:14)
   at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
   at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5575:57)
   at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
   at instance.update (runtime-core.esm-bundler.js:5689:56)
   at setupRenderEffect (runtime-core.esm-bundler.js:5703:9)
   at mountComponent (runtime-core.esm-bundler.js:5485:9)
   at processComponent (runtime-core.esm-bundler.js:5443:17)
  

What version of Directus are you using?

9.16.0 (main branch a4f6529)

What version of Node.js are you using?

16.16.0

What database are you using?

SQLite

What browser are you using?

Chrome

How are you deploying Directus?

running locally in dev

[piotr-cz]

Please mark the v9.16.0 release as yanked or pull it from npm at least until hotfix release is available.

Same should be done for the v9.15.* versions because of #14888

[paescuj]

Hey guys, the devs are well aware of this issue and a fix is already in the pipeline! It doesn't help to spam this thread...

[azrikahar]

A fix has been opened in #15160 and we're actively looking into it and verifying it. Thanks for the confirmations.