diff --git a/packages/devtools-kit/__tests__/component/editor.test.ts b/packages/devtools-kit/__tests__/component/editor.test.ts index 96a2500d3..2403cbb58 100644 --- a/packages/devtools-kit/__tests__/component/editor.test.ts +++ b/packages/devtools-kit/__tests__/component/editor.test.ts @@ -89,6 +89,21 @@ describe('editor: StateEditor.set', () => { }) }) + describe('editComponentState: non-existing path should not throw', () => { + // https://github.com/vuejs/devtools/issues/906 + it('does not throw when the path points to an undefined value', () => { + const target = { foo: 'bar' } + const state = { newKey: '', type: '', value: 'baz' } + const defaultCallback = stateEditor.createDefaultSetCallback(state) + // `bar` does not exist on `target`, so traversal would previously hit + // `undefined[field]` and throw a TypeError. + expect(() => { + stateEditor.set(target, 'bar.baz', 'qux', defaultCallback) + }).not.toThrow() + expect(target).toEqual({ foo: 'bar' }) + }) + }) + describe('editComponentState: array', () => { it('modify value', () => { const target = ['foo', 'bar'] diff --git a/packages/devtools-kit/src/core/component/state/editor.ts b/packages/devtools-kit/src/core/component/state/editor.ts index 759bb2071..acfb9af41 100644 --- a/packages/devtools-kit/src/core/component/state/editor.ts +++ b/packages/devtools-kit/src/core/component/state/editor.ts @@ -28,8 +28,15 @@ export class StateEditor { else object = object[section] as Recordable if (this.refEditor.isRef(object)) object = this.refEditor.get(object) + // The path may not exist on the object (e.g. when editing a Pinia store + // from the component inspector). Stop instead of throwing a TypeError + // on `undefined[field]`. + if (object == null) + return } const field = sections[0] + if (object == null) + return const item = this.refEditor.get(object)[field] if (cb) { cb(object, field, value)