bpmn-io / bpmn-io/form-js-examples
Error when using custom component in FormEditor
- Dominant language
- JavaScript
- Stars
- 32
- Forks
- 18
- PR merge metrics
- No merged PRs in 30d
Description
## Description
I've encountered a problem when trying to integrate a custom component into FormEditor. I was following an example for FormPlayground, but when using it within FormEditor, selecting the custom Range component in the UI throws an error.
## Code to Reproduce
```
formEditorRef.value = new FormEditor({
container: document.querySelector('#form-editor'),
additionalModules: [
RangeExtension,
PropertiesPanelExtension,
],
});
```
## Expected Behavior
The custom component should be available and functional within the form editor without any errors.
## Actual Behavior
When selecting the custom Range component in the interface, the following JavaScript error is displayed:
```Uncaught TypeError: Cannot read properties of undefined (reading '__H')```
## Screenshots

## Steps to Reproduce
1. Integrate the custom Range component into FormEditor using the code provided above.
2. Open the form editor UI.
3. Select the custom Range component.
4. Notice the error in the browser console.
## Additional Information
Version of bpmn-io/form-js: 1.7.0
Version Vue.js: 3.2.45
Contributor guide
Research direction
Start by reproducing the error with FormEditor 1.7.0, the custom Range component, and the additionalModules configuration shown in the issue. Inspect the FormEditor integration and Range component entry points involved when selecting the component; done means the Range component can be selected and used without the JavaScript __H error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100