Error when using custom component in FormEditor

[EinArlyn]

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

[pkochubey]

Related issue https://github.com/bpmn-io/form-js-examples/issues/8 Use webpack not vite for buid you project.

[EinArlyn]

Related issue https://github.com/bpmn-io/form-js-examples/issues/8 Use webpack not vite for buid you project.

So, should I better compile the component using Webpack and then integrate it into my project? I was confused by the fact that when I tried exactly as in the example through FormPlayground, everything worked properly without the need for a Webpack build, but Vite wasn't used in that project. Does this mean that the behavior I'm experiencing is specifically related to the build tool?

[pkochubey]

Does this mean that the behavior I'm experiencing is specifically related to the build tool?

100%

In example by default used webpack.

[EinArlyn]

Does this mean that the behavior I'm experiencing is specifically related to the build tool?

100%

In example by default used webpack.

Alright, thank you. I will try integrating it into my application after building the component with Webpack and then I'll report back on the results.

[EinArlyn]

Does this mean that the behavior I'm experiencing is specifically related to the build tool?

100%

In example by default used webpack.

Hello. Thank you for your answers. I implemented a sample application that is built with Webpack, but the application where I need to integrate this functionality still uses a Vite + Vue + TS environment. I could not replicate my previous experience on it. I created an issue hoping someone could help me with my problem, but it remains unanswered. There is more detailed information and two test projects there. Perhaps you might have some thoughts on where to direct attention to solve this issue. I would be very grateful.

[EinArlyn]

The main problem that needed to be solved was enabling the extension of the component set with custom components while ensuring everything worked smoothly with Vue.js + Vite.

To address this issue, a separate library was developed. This library facilitates the use of custom components and replicates the necessary functionalities from bpmn/form.js.

Additionally, to ensure compatibility with Vue.js + Vite, a custom plugin was created for minification purposes.

Further configurations were required in the vite.config.ts file:

optimizeDeps: {
  exclude: [
    '@einarlyn/bpmn-form-extended',
  ],
},
build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('bpmn-form-extended')) {
          return 'customFormEditor';
        }
        return 'app';
      },
    },
    plugins: [minifyBundles()],
  },
  minify: false,
},

References:

1. Vue.js + Vite project repository link
2. Library repository link