Camunda properties provider not working properly in React app

i am trying to add camunda features for my properties panel in my react app but i get a runtime error everytime i try to edit an element.
The exact error i am getting refers to minDash (TypeError:minDash.isArray is not a function). I don’t understand what am i doing wrong, do i need to import something else?

here is my code:

import {
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    CamundaPlatformPropertiesProviderModule
} from 'bpmn-js-properties-panel';

import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json'

const CamundaModeler = () => {
    const bpmnModelerRef = useRef(null);
    const propertiesPanelRef = useRef(null);

    useEffect(() => {
        try {
            bpmnModelerRef.current = new BpmnModeler({
                container: '#bpmnview',
                propertiesPanel: {
                    parent: '#propertiesview'
                },
                additionalModules: [
                    BpmnPropertiesPanelModule,
                    BpmnPropertiesProviderModule,
                    minimapModule,
                    CamundaPlatformPropertiesProviderModule
                ],
                moddleExtensions: {
                    camunda: CamundaBpmnModdle
                },
                keyboard: {
                    bindTo: window
                }
            });

            propertiesPanelRef.current = bpmnModelerRef.current.get('propertiesPanel');

            return () => {
                bpmnModelerRef.current.destroy();
            };
        } catch (error) {
            handleError(error.message);
        }

    }, []);
...

We could verify if min-dash exports an isArray helper. It does :white_check_mark:.

You could check your bundle and ensure that you import min-dash properly. What is the value of it as it is being imported in your bundle?

i haven’t imported min-dash into my js file. I assumed that by installing these packages bpmn-js-properties-panel, @bpmn-io/properties-panel and camunda-bpmn-moddle, i would be able to just follow the example shown in bpmn-js-examples. The error occurs when i import CamundaPlatformPropertiesProviderModule. I found this declaration in bpmn-js-properties-panel/dist/index.js:

var minDash = require('min-dash');

i tried importing minDash in my module as

import *  as minDash from 'min-dash';

an i checked the value of minDash.isArray and it is indeed a function, no problem there. The problem is that the bpmn-js-properties-panel module imports it as

var minDash = require('min-dash');

and for some reason it’s not working.

Hi @nikku @John_Ouzounis I am facing exactly same error from past 4-5 days, have you solved the issue?? if not please suggest some methods.
Eagerly waiting for your response.

I have not resolved this yet and honestly I don’t know how

What is the value of minDash in this case? Did you properly configure your project to recognize cjs imports?

min-dash exposes the commonjs exports via index.cjs.

If i remember correctly the value of minDash was undefined. My project has default configurations from being generated by npx create-react-app
Do i need to modify those?

Have you got any solution to this??

Not really, I kinda gave up on it and didn’t add that feature. It does work for a nodejs app though. If you try to create a react project without “npx create-react-app” maybe you could make it work for react as well.