Camunda properties provider not working properly in React app

[John_Ouzounis]

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);
        }

    }, []);
...

[nikku]

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

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?

[John_Ouzounis]

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');

[John_Ouzounis]

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.

[Amit_Kumar]

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.

[John_Ouzounis]

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

[nikku]

@John_Ouzounis

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

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.

[John_Ouzounis]

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?

[Anushri_Rawat]

Have you got any solution to this??

[John_Ouzounis]

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.

[tianxiameiren]

@John_Ouzounis Have you resolved this issue? I met the same issue.

[John_Ouzounis]

Unfortunately no, it seems to work in a nodejs environment though. I am unable to make it work for react

[tianxiameiren]

@nikku Do you have idea to resolve this problem in React

[nikku]

To try to resolve this topic: This is usually not about min-dash but about an inproper configuration of your bundler:

• Ensure that your bundler does not only match .js files, but also .cjs (for CommonJS setups) and/or .mjs for ES module setups.
• Otherwise it will not pick up files designated as CommonJS modules (or ES modules) conversely

min-dash@4 is an ES module with a dual-module export; if you cannot fix the issue yourself you could pin your project to use min-dash<4.2 via a package override. I’d rather recommend to check (and potentially fix) your bundling setup though.

Best! N

[tianxiameiren]

Yes, but I didn’t use min-dash in my code. I just use create-react-app to create a react application and import bpmn as the following screenshot mentioned.

So I can’t change the min-dash version. I noticed bpmn related used it.

[nikku]

You use create-react-app. What keeps you from specifying an overrides in your package.json and run npm install again?

I understand that create-react-app does not make it easy for you to change your bundling setup. We’ll investigate if this is something we can workaround / mitigate on our end.