Cannot use custom components for form-js cause PropertiesPanel undefined error in new react app

Hi guys!
I’m a little bit new in using bpmn.io_form-js. So I’m trying to create custom Range component with custom property panel extension according to this example project: [form-js-examples/custom-components at master · bpmn-io/form-js-examples · GitHub] in my react app(created using npx create-react-app cmdline)

But when I drag and drop my custom Range component from Components Palette to work zone I got error:

Cannot read properties of undefined (reading 'context')
TypeError: Cannot read properties of undefined (reading 'context')
    at q (http://localhost:3000/static/js/bundle.js:31961:13)
    at useError (http://localhost:3000/static/js/bundle.js:27165:64)
    at NumberFieldEntry (http://localhost:3000/static/js/bundle.js:28597:23)
    at b.Min [as constructor] (http://localhost:3000/static/js/bundle.js:608:85)
    at b.q [as render] (http://localhost:3000/static/js/bundle.js:64212:15)
    at O (http://localhost:3000/static/js/bundle.js:64139:36)
    at S (http://localhost:3000/static/js/bundle.js:64022:188)
    at O (http://localhost:3000/static/js/bundle.js:64141:172)
    at S (http://localhost:3000/static/js/bundle.js:64022:188)
    at z (http://localhost:3000/static/js/bundle.js:64186:148)

It throws from NumberFieldEntry component of customPropertyProvider.
I don’t know, in example project everything works fine, but when I’m trying to implement this in new project I faced with this problem, may be anyone knows what’s the reason, it would be realy helpful!

Here is the project:

Copy of my response to the same issue here:

Hi, I am currently investigating this issue.

So my current working theory is that the injected properties panel entries are using the react jsx, which causes mixing of preact and react trees which isn’t something that can be done.

I am experimenting at the moment and I’ll get back to you :slight_smile: