Formjs properties panel cannot be extended

Hey guys o/,

I copied/pasted the form.js custom range element from the examples page into my Reactjs project in vite with the following code:

import { useRef, useEffect } from "react";
import { FormEditor } from "@bpmn-io/form-js";

import "@bpmn-io/form-js/dist/assets/form-js.css";
import "@bpmn-io/form-js/dist/assets/properties-panel.css";
import "@bpmn-io/form-js/dist/assets/form-js-editor.css";

import RangeExtension from "./custom/range/render";
import RangePropertiesPanelExtension from "./custom/range/propertiesPanel";

export const Formularios: React.FC = () => {
  const bpmnFormRef = useRef<FormEditor | null>(null);

  useEffect(() => {
    try {
      bpmnFormRef.current = new FormEditor({
        container: "#form",
        additionalModules: [RangeExtension],
        editorAdditionalModules: [RangePropertiesPanelExtension],

        components: [],
        type: "default",

      return () => {
    } catch (e) {
      const error = e as ErrorEvent;
  }, []);

  return <div id="form" className="w-full h-full" />;

The form works just fine, but the properties panel does not render the range group

The example works but mine doesn’t. Do your guys think I’m missing something?
I want to show the custom group on the panel so I can create my own component.

I have these versions in my package.json

"@bpmn-io/form-js": "^1.8.4",
"@bpmn-io/properties-panel": "^3.18.1",

I also have this error when viewing the form on production mode
Error: No provider for "formFields2"! (Resolving: rangeField -> formFields2)
But I think it’s a different issue.

Here’s the example code

One thing to note is that the example code runs in a FormPlayground, but when changed to FormEditor, the same problem appears

I faced with the same problem.
In my case it’s because of in FormEditor and FormViewer you need to paste
your RangePropertiesPanelExtension to additionalModules (not editorAdditionalModules) while initializing form in App.tsx