can't reuse entryFields from @bpmn-io/properties-panel

[DK-2013]

Describe the Bug

if wrap playgroundForm in preact component - it work fine if then add custom component from sample - got error in NumberField

Steps to Reproduce

1. npm create vite@latest wrapper-sample -- --template preact
2. add playground in wrapper (its work fine):

   export function App() {
   useEffect(() => {
   const container = document.getElementById('anchor');
   console.log(container);
   new FormPlayground({
     container,
     schema,
     data: {},
   });
   }, []);
   return (
   <div id="anchor" />
   )
   }

3. add custom component from custom-sample

   new FormPlayground({
     container,
     schema,
     data: {},
   
     // load rendering extension
     additionalModules: [
       RenderExtension
     ],
   
     // load properties panel extension
     editorAdditionalModules: [
       PropertiesPanelExtension
     ]
   });

4. render fine, but on attempt drug Range to form - got error in console

wrapper-sample

Expected Behavior

no error, custom component work as in custom-sample

Environment

• Host (Browser/Node version), if applicable: FireFox 119, Node 18.16.0
• OS: Ubuntu 22.04
• Library version: @bpmn-io/form-js ^1.4.0

[pinussilvestrus]

Hi @DK-2013 , thanks for reporting!

Can you maybe share the errors you got? We had problems with vite properly deduplicating preact, that's why we ended up using webpack in our example who handles it better: https://github.com/bpmn-io/form-js-examples/pull/7

[DK-2013]

I make branch with sample in fork of this repo - directory: wrapper-sample. steps in sample:

1. npm i
2. npm run dev
3. drug Range field to form (http://localhost:5173/)

[pinussilvestrus]

Thanks for sharing, I will have a look 👍

[pinussilvestrus]

When checking the project out, I get the same errors as when we experimented with vite during #6. Vite do not properly deduplicate preact leading to the known

TypeError: Cannot read properties of undefined (reading 'context').

This was the reason we moved to our standard webpack pattern. Would it be an option for you to try something else then vite?

In the meantime, we should figure out how to properly support vite here.

[DK-2013]

I found this solution, but it is not applicable for libs using pattern, which implemented in properties-panel. Current structure project is complex to change build tools (client app - wrapper lib - @bpmn-io lib), include integrate react based lib to preact. Other side if will be impossible use vite then need impliment properties-panel or search other solution.

Anyway thank you for your carry!

[pinussilvestrus]

Update: I tried a couple of things in vite via resolve.alias and the @rollup/plugin-alias plugin to to the module replacement, without any luck so far.

The main problems remains that we bundle preact inside the properties panel, which vite can't properly replace although it's defined via config.

resolve: {
  alias: [
    {
      find: 'preact/hooks',
      replacement: path.resolve(__dirname, 'node_modules/preact/hooks/dist/hooks.module.js'),
    },
    {
      find: 'preact/jsx-runtime',
      replacement: path.resolve(__dirname, 'node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js'),
    },
    {
      find: 'preact/jsx-dev-runtime',
      replacement: path.resolve(__dirname, 'node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js'),
    },
    {
      find: 'preact/devtools',
      replacement: path.resolve(__dirname, 'node_modules/preact/devtools/dist/devtools.module.js'),
    },
    {
      find: 'preact/debug',
      replacement: path.resolve(__dirname, 'node_modules/preact/debug/dist/debug.module.js'),
    },
    {
      find: 'preact/compat',
      replacement: path.resolve(__dirname, 'node_modules/preact/compat/dist/compat.module.js'),
    },
    {
      find: 'preact',
      replacement: path.resolve(__dirname, 'node_modules/preact/dist/preact.module.js'),
    }
  ]
}