`create-react-app` fails to bundle properties panel - `minDash.isArray is not a function`

[BehzadBakhshayesh]

Bug Description

Hello. I created a React component using the "bpmn-js", "@bpmn-io/properties-panel", and "bpmn-js-properties-panel" packages. An error emerges when utilizing the CamundaPlatformPropertiesProviderModule, displaying: TypeError: minDash.isArray is not a function. It seems that this issue stems from the min-dash version, and updating it should resolve the error.

"dependencies": {
  "@bpmn-io/properties-panel": "^3.21.0",
  "bpmn-js": "^17.8.2",
  "bpmn-js-properties-panel": "^5.17.1",
  "min-dash": "^4.2.1",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
},

Reproduction Steps

I'm using the following code and try to bundle the application using create-react-app:

import BpmnModeler from "bpmn-js/lib/Modeler";
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
  CamundaPlatformPropertiesProviderModule
} from "bpmn-js-properties-panel";
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import "@bpmn-io/properties-panel/assets/properties-panel.css";

bpmnModeler.current = new BpmnModeler({
  container: canvasRef.current,
  propertiesPanel: {
    parent: propertiesPanelRef.current
  },
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    CamundaPlatformPropertiesProviderModule
  ]
});

Then reload the application.

Expected Outcome

Kindly address this issue.

Environment

• Host: Browser
• Browser: Google Chrome v125
• OS: Windows 10
• Library Version: 2.0.0

[barmac]

This looks more like a bundler issue. Can you reproduce this problem in a codesandbox?

[BehzadBakhshayesh]

Error doesn't appear on codesandbox but is present in my setup. Could you please review my repository? (both codes are identical...)

[nikku]

@BehzadBakhshayesh Please ensure you also recognize JavaScript files with a mjs or cjs extension; otherwise you'll force your bundler to use incompatible files in an ESM or legacy setup.

To test if things work, try to simplify your setup to just use min-dash.

[nikku]

As you're using just plain create-react-app this should work out of the box.

[barmac]

I run your code locally, and the error is thrown from the @bpmn-io/extract-process-variables module. For a reason still unknown to me, the require var minDash = require('min-dash'); is resolved as a path to a file:

[nikku]

@barmac cjs is not properly recognized as a JS asset, hence the static resolution to a file, cf. https://github.com/bpmn-io/bpmn-js-properties-panel/issues/1058#issuecomment-2176142055.

I believe this is tracked upstream via https://github.com/facebook/create-react-app/issues/12700.

@BehzadBakhshayesh There is nothing we can do to remedy this. create-react-app simply has to fix things

[BehzadBakhshayesh]

@nikku @barmac Thank you.