diff --git a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts index fa69adccb..9e4137da8 100644 --- a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts +++ b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts @@ -68,4 +68,18 @@ describe('useTemplateRef', () => { expect(t2!.value).toBe(root.children[0]) expect(t1!.value).toBe(null) }) + + test('should warn on duplicate useTemplateRef', () => { + const root = nodeOps.createElement('div') + render( + h(() => { + useTemplateRef('foo') + useTemplateRef('foo') + return '' + }), + root, + ) + + expect(`useTemplateRef('foo') already exists.`).toHaveBeenWarned() + }) }) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 12663962a..58c109a92 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -10,11 +10,21 @@ export function useTemplateRef( const r = shallowRef(null) if (i) { const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs - Object.defineProperty(refs, key, { - enumerable: true, - get: () => r.value, - set: val => (r.value = val), - }) + + let desc: PropertyDescriptor | undefined + if ( + __DEV__ && + (desc = Object.getOwnPropertyDescriptor(refs, key)) && + !desc.configurable + ) { + warn(`useTemplateRef('${key}') already exists.`) + } else { + Object.defineProperty(refs, key, { + enumerable: true, + get: () => r.value, + set: val => (r.value = val), + }) + } } else if (__DEV__) { warn( `useTemplateRef() is called when there is no active component ` +