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.