Custom Components - CustomPropertiesProvider Errors in Next.js project

[NicolasGehring]

Describe the Bug

We’re using form-js in a Next.js project and want to add a custom dropdown component that fetches data from a remote API for dynamic options. We followed the official example (https://github.com/bpmn-io/form-js-examples/tree/master/custom-components) to build a custom component. The example works as expected when running the repo locally. However the exact same code results in errors in the custom properties provider when it tries to access preact context, specifically within the NumberField context handler. When the Range slider is dragged into the form the app crashes with the following 2 errors:

I suspect the issue may stem from a conflict between Next.js and preact context handling. However, since this bug has been blocking us from releasing crucial features for several days, we are highly motivated to collaborate on finding a solution together.
Please reach out as we are interested in contributing a solution or if you have any idea how that could be resolved.

Steps to Reproduce

To reproduce this issue, I built a custom sandbox that clearly demonstrates the error. The sandbox is based on a simple Next.js starter pack with no modifications aside from adding the form-js component, which initially functions as expected. Upon starting the project, the playground component loads correctly.

https://codesandbox.io/p/devbox/failing-forms-extension-next-n5d7pl

The custom extension is an exact copy from the official examples.

However, when line 37 in the playground component (app/forms/Playground.tsx) is uncommented, moving the range slider triggers the errors. If it is commeted in then there are no errors.

Expected Behavior

The form-js extension work independant from the web-framework it is used in.

Environment

• Host Chrome
• OS: MacOs
• Library version:
  "@bpmn-io/form-js": "^1.11.3",
  "@bpmn-io/properties-panel": "^3.25.0",