Uncaught (in promise) TypeError: Cannot read properties of undefined

I am trying to improve the property panel of the camunda modeler to add a custom component, when I plugin the code and run the code I get the error in the SpellProps.js file while using TextFieldEntry with the error :

hooks.module.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘context’)
at q (hooks.module.js:1:1551)
at useError (index.esm.js:436:17)
at b.TextfieldEntry [as constructor] (index.esm.js:4244:1)
at b.O [as render] (preact.module.js:1:1)
at L (preact.module.js:1:1)
at C (preact.module.js:1:1)
at L (preact.module.js:1:1)
at C (preact.module.js:1:1)
at L (preact.module.js:1:1)
at C (preact.module.js:1:1)

My contents of SpellProps.js file :

import { TextFieldEntry, isTextFieldEntryEdited } from ‘@bpmn-io/properties-panel’;
import { is } from ‘bpmn-js/lib/util/ModelUtil’;

import { html } from ‘htm/preact’;
import { debounce } from ‘min-dash’;

export default function(element, modeling, translate) {

return [
id: ‘spell’,
isEdited: isTextFieldEntryEdited,
component: Spell



function Spell(props) {
const { element, id, modeling,translate} = props;
//const modeling = useService(‘modeling’);
//const translate = useService(‘translate’);
//const debounce = useService(‘debounceInput’);

const getValue = () => {
return element.businessObject.spell || ‘’;

const setValue = (value) => {
return modeling.updateProperties(element, {
spell: value


return html<${TextFieldEntry} id=${ id } element=${ element } description=${ translate('Apply a black magic spell') } label=${ translate('Spell') } getValue=${ getValue } setValue=${ setValue } debounce=${ debounce } tooltip=${ translate('Check available spells in the spellbook.') } />

And i referred the following repo : bpmn-js-examples/properties-panel-extension at main · bpmn-io/bpmn-js-examples · GitHub

can someone help me here