can't reuse entryFields from @bpmn-io/properties-panel about form-js-examples HOT 6 OPEN

Thanks for sharing, I will have a look 👍

from form-js-examples.

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

from form-js-examples.

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/)

from form-js-examples.

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.

from form-js-examples.

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!

from form-js-examples.

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'),
    }
  ]
}

from form-js-examples.