bpmn-io / bpmn-io/form-js-examples

Error when using custom component in FormEditor

Open
#12 6 comments 0 reactions 0 assignees View on GitHub
backlog bug
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

![image](https://github.com/bpmn-io/form-js-examples/assets/39989208/3a348770-4839-4736-bfc2-40704264e7b3)

## 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.