Error on latest modeler version (3.5.0)

BPMN & Modeling Discussion & Questions
1

Hello! I just updated my modeler sources to the latest version and (on a clean directory) I get this error on npm start / npm run dev

<static/media/Play.f79fe6ae.svg /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
in static/media/Play.f79fe6ae.svg (created by StartInstanceTool)
in button (created by DropdownButton)
in div (created by DropdownButton)
in DropdownButton (created by StartInstanceTool)
in Slot (created by Toolbar)
in div (created by Toolbar)
in Toolbar (created by App)
in SlotFillRoot (created by App)
in div (created by App)
in div (created by DropZone)
in DropZone (created by App)
in App (created by Context.Consumer)
in WithCache (created by ForwardRef)
in ForwardRef (created by AppParent)
in AppParent

I donā€™t understand where to correct it. I get the same error on develop branch and on tag 3.5.0.
Also, starting Camunda Modeler I receive the following console error:

Failed to execute ā€˜createElementā€™ on ā€˜Documentā€™: The tag name provided (ā€˜static/media/Play.f79fe6ae.svgā€™) is not a valid name.
at createElement (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:7815:34)
at createInstance (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:9469:20)
at completeWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21079:28)
at completeUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24733:16)
at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24706:12)
at workLoopSync (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24671:22)
at performSyncWorkOnRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24270:11)
at eval (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:12199:24)
at unstable_runWithPriority (webpack-internal:///./node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:697:12)
at runWithPriority$2 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:12149:10) [ error ]
This error may be the result of a plug-in compatibility issue. [ info ]
Disable plug-ins (restarts the app) [ info ]

I am developing on Windows 10 and I updated Node to the latest LTS.

2

Also, two tests on imageConversion (generateImage.js) are not working.
I get an error ā€œsvg.replace is not a functionā€, as if the required svg variable is not a string. After some simple debug it comes out itā€™s an object.

1) should export <png>
     util - generateImage
     TypeError: svg.replace is not a function
    at generateImage (webpack:///./src/app/util/generateImage.js?:27:13)
    at Context.eval (webpack:///./src/app/util/__tests__/generateImageSpec.js?:19:83)

2) should export <jpeg>
     util - generateImage
     TypeError: svg.replace is not a function
    at generateImage (webpack:///./src/app/util/generateImage.js?:27:13)
    at Context.eval (webpack:///./src/app/util/__tests__/generateImageSpec.js?:19:83)
3

What are the steps to reproduce your issue?

Are you running npm run dev?

4

Well, the steps are simply to open Camunda Modeler running

npm run dev

and, if I create a new bpmn diagram, I get the errors above. After doing some research, I may have found the problem, that is the webpack loader. I suppose on windows 10 (on linux everything goes right) there are some problems with it. I think that on tests, where it should use the raw-loader, it instead choose the react-svg-loader on imageConversionSpec test.
Viceversa, running Camunda Modeler, there is the specular issue loading the three svg icons for deployment and start instance tools using the file-loader instead of the react-svg-loader.
Iā€™m not sure if Iā€™m right, but these are my thoughts about now.

5

Youā€™re right. This is a known issue with Windows and loading SVGs that we havenā€™t fixed, yet. The good news is that it only appears in development mode. Weā€™ll fix that as soon as possible.

1 Like
6