Issue with Integrating Custom Component into FormEditor in a Vue.js + TS + Vite Environment

[EinArlyn]

I encountered issues while following the instructions to create custom components for FormEditor, leading me to raise an issue where I was advised to use Webpack for the build process. Taking this advice, I set up a project with Vue.js, TypeScript, and Webpack, and successfully implemented a custom component, guided by this example.

After a successful implementation in the test environment, I attempted to transfer the functionality to the main project that uses Vue.js + TS + Vite. In this environment, I encountered a problem: errors occur when dragging the component into FormEditor.

The problematic console errors are as follows:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'context')
at index.js:344:19

Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')
at Object... (index.esm.js:62:1)

Steps to Reproduce:

1. Clone the project.
2. Install dependencies and run the project.
3. Drag the custom component into the form editor.

Expected Behavior:

The custom component should integrate seamlessly into FormEditor without any errors.

Actual Behavior:
The component does not integrate, and errors are displayed in the console.

Question:
How can the functionality of the custom component, which works in an environment with Webpack, be correctly transferred to a project on Vue.js + TS + Vite?

Additional Information:

• Instructions for creating custom components: custom-form-components
• Project where the custom component works successfully: custom-element-form-js
• Vite project where errors are occurring: custom-element-form-js-vite
• Screenshot of the error is attached.

Any help or debugging suggestions would be greatly appreciated.

[EinArlyn]

I was able to resolve the issue with the implementation for the Vue.js + Vite project. You can find the details in this issue.

[swseniordev]

Hello @Skaiir, I am experiencing the same issue in React APP. is there any ETA for this issue?, thank you very much !!

[EinArlyn]

Hello @Skaiir, I am experiencing the same issue in React APP. is there any ETA for this issue?, thank you very much !!

Considering that I have been leaving several issues since the end of March, I suspect that this won’t be resolved anytime soon. Maybe @Skaiir will correct me. I solved my problem by writing my own library, which overrides the functionality of form.js and bundles it using rollup. In my previous comment, there is a link where you can find the repository with the implementation.

[swseniordev]

@EinArlyn , do you have any solution for react? I checked your code here https://github.com/EinArlyn/bpmn-form-extended/ and it works well, but I havent figured out how to create my own component there. Maybe is the language. Do you mind to provide a folder structure example of a custom component, using your library? because with your library I was just able to execute the range component, just because it is already built in.

[EinArlyn]

@EinArlyn , do you have any solution for react? I checked your code here https://github.com/EinArlyn/bpmn-form-extended/ and it works well, but I havent figured out how to create my own component there. Maybe is the language. Do you mind to provide a folder structure example of a custom component, using your library? because with your library I was just able to execute the range component, just because it is already built in.

In the /src/custom directory, there are two folders responsible for custom components (/src/custom/components) and custom properties panels (/src/custom/properties-panel).

To add your own component (at least in my code), you need to create a folder for your component in the /src/custom/components directory and a file index.js, where the structure and visual part of the component will be described. You can use the Range component as an example.

After describing the component structure, add the class with the constructor of the new component to the /src/custom/components/index.js file and also to RenderExtension.

The project has a README file. If needed, I can translate it into English as well. It contains more information about the project's folder structure.

[swseniordev]

@EinArlyn, the thing is, if I install your library with npm and execute the project, it works properly, but when I download the src folder from your repository and try to execute it from there, integrated to my app, it doesnt work, I get the same initial issue, not sure why. That said, I dont have a folder structure like the one you mentioned, but, even if I create it, nothing happens, since in your code, only the RenderExtension and PropertiesPanelExtension are loaded (see here https://github.com/EinArlyn/bpmn-form-extended/blob/main/src/form-js/base-form.js ), and if I pass my modules in the additionalModules property, I get the same initial issue. Question is, how to use your library, installing it with npm but then configure the library with my own extensions? instead of using your source code (because I get same initial issue, not sure why)?

[EinArlyn]

@EinArlyn, the thing is, if I install your library with npm and execute the project, it works properly, but when I download the src folder from your repository and try to execute it from there, integrated to my app, it doesnt work, I get the same initial issue, not sure why. That said, I dont have a folder structure like the one you mentioned, but, even if I create it, nothing happens, since in your code, only the RenderExtension and PropertiesPanelExtension are loaded (see here https://github.com/EinArlyn/bpmn-form-extended/blob/main/src/form-js/base-form.js ), and if I pass my modules in the additionalModules property, I get the same initial issue. Question is, how to use your library, installing it with npm but then configure the library with my own extensions? instead of using your source code (because I get same initial issue, not sure why)?

Most likely, when you try to transfer my structure to your project, the custom components are simply not built correctly.

One of the reasons why I decided to override the functionality of form.js is that it was not possible to implement the correct build of the project using Vite. If you look closely, there is a section in the rollup.config.js file where I override the paths using aliases. This turned out to be quite critical, especially if the project uses Vite as the bundler, rather than Webpack or Rollup.

[swseniordev]

I see, not sure it is a good idea to replace react in my project with preact with this configuration.

    { find: "react", replacement: "preact/compat" },
    { find: "react-dom", replacement: "preact/compat" },
    { find: "../preact", replacement: "preact" },
    { find: "../preact/hooks", replacement: "preact/hooks" },
    { find: "../preact/jsx-runtime", replacement: "preact/jsx-runtime" }

Not sure all the rest of my application will keep working normally. Thank you @EinArlyn and I hope @Skaiir will fix this soon.

[EinArlyn]

I see, not sure it is a good idea to replace react in my project with preact with this configuration.

    { find: "react", replacement: "preact/compat" },
    { find: "react-dom", replacement: "preact/compat" },
    { find: "../preact", replacement: "preact" },
    { find: "../preact/hooks", replacement: "preact/hooks" },
    { find: "../preact/jsx-runtime", replacement: "preact/jsx-runtime" }

Not sure all the rest of my application will keep working normally. Thank you @EinArlyn and I hope @Skaiir will fix this soon.

In their custom component example, these paths are set up in the build for Webpack, but in my case, it was decided that it would be better to implement a separate library and connect it via NPM to avoid affecting the functionality of the application itself.

[swseniordev]

This is what I am doing now, keep your library as a separated library from my project, compiling it and including the compiled version in my project. Thank you @EinArlyn for your really great support. Much appreciate it.

[EinArlyn]

This is what I am doing now, keep your library as a separated library from my project, compiling it and including the compiled version in my project. Thank you @EinArlyn for your really great support. Much appreciate it.

You're always welcome. You can actually fork my library if you want. I hope the developers will eventually implement a solution in their own library so that we don't have to come up with workarounds like this.

[Skaiir]

I want to tackle this this week, and at least leave us all with some docs or something to make the experience a little less painful.

@swseniordev You definitely don't want to alias your entire react project to preact. It probably will still work, but that shouldn't be a dependency to add custom components over.