Loader when compiling Spell

[burn83]

When I try to compile code like as example i receive an error that suggest me to add another loader to read correctly a row of the Spellprops.js in which we can retrieve "return <"
Instruction. Can, anyone helps me?

File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
   }

>   return <TextFieldEntry
     id={id}
     element={element}

• Angular 13
• Node 16.17.1, npm 8.5.2
• OS: Windows 11

[nikku]

Could you specify the exact project you're trying?

[burn83]

Yes. sure.

i tried to realize this one:
https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension

but my compiler seems to need another loader for compile that row of code. It seems that i must to configure Babel aproppriately. It's correct? There is another solution more simple?

[nikku]

Indeed. The project uses JSX and you need to add the babel-loader to transpile it to plain javascript: https://medium.com/@sivaraj-v/basic-webpack-4-and-es5-to-es6-transpiler-using-babel-dc66e72c86c6.

[burn83]

But in my project i don't have webpack.config.js, in order to add directive about babel. I only have tsconfig.json

[nikku]

You do, as the error message indicates. At least it seems to be used under the hood.

What you need to enable is transpilation of JSX (inside an Angular project). Not sure how that works. Alternatively you'd need to split-up the extension (to be transpiled individually) and the integration into your Angular app.

[burn83]

"Alternatively you'd need to split-up the extension (to be transpiled individually) and the integration into your Angular app. ..."
How can do this?

[nikku]

"Alternatively you'd need to split-up the extension (to be transpiled individually) and the integration into your Angular app. ..."

How can do this?

1️⃣ You create your customizations in a fork of https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension. That project compiles JSX -> JS.

2️⃣ Consume the transpiled JS resources produced in 1️⃣ in your Angular app.

To get additional feedback on this case I'd ask you to create a topic in our forum and cross-reference this thread. Maybe users already solved this issue in a simpler manner.

[burn83]

OK ... i found a complete solution to convert SpellProps.js(x) in SpellProps.js, in pure mode.
`"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});

exports["default"] = _default;

var _propertiesPanel = require("@bpmn-io/properties-panel");
var _bpmnJsPropertiesPanel = require("bpmn-js-properties-panel");
var _react = require("react");

function _default(element) {
return [{
id: 'spell',
element: element,
component: Spell,
isEdited: _propertiesPanel.isTextFieldEntryEdited
}];
}

function Spell(props) {
var element = props.element,
id = props.id;
var modeling = (0, _bpmnJsPropertiesPanel.useService)('modeling');
var translate = (0, _bpmnJsPropertiesPanel.useService)('translate');
var debounce = (0, _bpmnJsPropertiesPanel.useService)('debounceInput');

var getValue = function getValue() {
return element.businessObject.spell || '';
};

var setValue = function setValue(value) {
return modeling.updateProperties(element, {
spell: value
});
};

return _react.createElement(_propertiesPanel.TextFieldEntry, {
id: id,
element: element,
description: translate('Apply a black magic spell'),
label: translate('Spell'),
getValue: getValue,
setValue: setValue,
debounce: debounce
});
}
`

and this is the output...

Now in browser, on the console, i find this error : " Uncaught (in promise): TypeError: Cannot add property __, object is not extensible" ... It's a bug?! or ... what?

[burn83]

can anyone help me?

[nikku]

@burn83 This looks like another Angular <-> bpmn.io tooling incompatibility issue.

Please share a codesandbox that allows us to reproduce this behavior.

We aim for compatibility with existing UI frameworks. Experience has shown that some (Angular, Vue) do interesting magic though that you may need to disable for bpmn-js to work reliably.

[nikku]

We plan to simplify our examples to not use JSX/transpilation anymore (#206). That should workaround most of the complications you mentioned in this issue.

[minzhenyu]

in my project, vue2， it doesn't work