Custom React component does not render

[billbarni]

Describe the Bug

Depending on the Webpack configuration, Properties Panel Extension components cannot render.

If you clone any example repos out there that use TextEntryField to customize the properties panel, if you export that library to Camunda Modeler (instead of using a React web-modeler), several issues emerge, that can be fixed by a webpack configuration, but then... no component that is custom gets rendered (a "react-calendar" for example).

Steps to Reproduce

1. Build or clone any repo with a Properties Panel Extension, something like: https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension
2. Update the imports to "@bpmn-io/properties-panel:^13.2" and "bpmn-js-properties-panel:^1.0.0"
3. Change the webpack distribuition to be able to import the plugin to Camunda Modeler: https://github.com/pinussilvestrus/camunda-modeler-excel-import-plugin/blob/main/webpack.config.js
4. Add a "react-calendar" (npm install react-calendar) component and render it somewhere inside the Properties Panel
5. Export the plugin to Camunda Modeler
6. Issues emerge.

Option 1: Change the webpack to something like: https://github.com/pinussilvestrus/camunda-modeler-excel-import-plugin/blob/main/webpack.config.js

• does not render inside the Properties Panel. useState does not work for your components, for the TextField it does.

Option 2: Change the webpack to somethin like: https://github.com/bpmn-io/bpmn-js-examples/blob/master/properties-panel-extension/webpack.config.js

• TextFieldEntry does not render/hooks don't work.

Expected Behavior

Both components to render (<Calendar /> and <TextFieldEntry />) and be able to import and use "useState" and other hooks, those are ALWAYS null/undefined.

Environment

• OS: Windows 10
• Camunda Modeler Version: 5.0.0