PropertiesProvider JS definition / create-react-app 5.x

Developers Modeler
1

Hello !

I am trying to define my own PropretiesProvider for the BpmnModeler but I’m failing miserably.

Context

  1. I am trying to use bpmn modeler and create a custom properties provider
  2. I am working with
    “bpmn-js”: “^8.9.1”,
    “bpmn-js-properties-panel”: “1.0.0-alpha.0”
  3. I am using React, which should not be an issue but who knows :smiley:

Error I get

TypeError
Cannot add property __, object is not extensible

Steps to reproduce

  1. clone this repository
  2. npm install
  3. npm run storybook
  4. Open http:// localhost:6006 in your browser
  5. Click on BpmnModeler → Camunda, click on elements and see custom properties showing on the right
  6. Click on BpmnModeler → Function PP (or Class PP)
  7. Click on the StartEvent and see the error message

The idea is that I made one component that receives additionalModules and moddleExtension as parameters, allowing me to tests a few things.

Code & issue highlights

There are 3 ways I’m using the BpmnModeler
image

  • The first is directly using the CamundaPropertiesProvider and moddle. It works perfectly
  • The second one named Function PP using the MagicPropertiesProvider defined as a function as shown in the example (bpmn-io/bpmn-js-examples/blob/master/properties-panel-extension/app/provider/magic/MagicPropertiesProvider.js). This one fails with above error when a click occurs on the StartEvent circle within the Diagram
  • The third one named Class PP using the MagicClassPropertiesProvider defined as a class (src/stories/bpmnjs/core/magicUsingClass/MagicClassPropertiesProvider.js) , following what has been done with Camunda official CamundaPlatformPropertiesProvider.js. This last one also fails like the one defined as a function

I really don’t know why I cannot make this work, I even tried to copy / paste the magic example directly from the examples repository but still had the issue.

Additional notes

  • Within Storybook, we can see that the CamundraPropertiesProvider is passed to the BpmnModeler as a class. Whereas for the others the PropertiesProviders appears as “function”. Don’t know if that’s something to look into
  • Sadly, I CANNOT upload more images because I’m a new user…

Thanks for your help !

2

Hello @Axel_Couty, welcome!

You can checkout this thread about using the properties panel inside a React application. Maybe it already helps you.

3

Thanks @Niklas_Kiefer , having a look !

Edit 1:
As of today (15th of February 2022) it’s pretty hard for me to test the solution provided in linked thread because of versions compatibilities.

  • Recently create-react-app bumped into version 5.0.0, and also bumped react-scripts to version 5
  • Craco, which is used in linked thread to override the webpack config AND replace react-scripts is not compatible with CRA 5.0.0
  • Only the Alpha version of craco is compatible
  • I am also using react-storybook which calls react-scripts under the hood. That means I should modify the configuration to make storybook call craco instead of react-scripts.

My next steps:

  • Try to create a react application with previous CRA version, I’ll report there if I’m able to make it :slight_smile:
4

:white_check_mark: I have something working now :slight_smile: .

TL&DR

  • this thread solution does not work out of the box with latest version of create-react-app
  • But it does for earlier version :rocket:

Using create-react-app with bpmn-js and bpmn-js-properties-panel

But I managed to have a react project going by doing the following:

  1. Create react application
    npx create-react-app --script-version=4.0.3
  2. Install dependencies
    npm install --save preact bpmn-js@8.9.1 bpmn-js-properties-panel@1.0.0-alpha-2 craco@6.4.3
  3. In package.json look at the scripts object definition and replace react-scripts with cracro
  4. Create a craco.config.js file with the content provided in the thread
  5. Implement your customPropertiesProvider etc… run npm start and it works :slight_smile:
5

Nice to hear! And thanks for sharing your solution :slightly_smiling_face:

6

Just my 2 cents: the above will NOT work without aliasing preact to react for react 18, make sure you downgrade react down to 17 - especially react-dom