Is bpmn.js currently incompatible with ES6

Developers
1

The object used in ES6 is proxy proxy proxy, which makes read only unusable

2

And your question is? :slight_smile:

3

image
vue3x，An exception occurred during use, $PKG read only

4

Please provide more context. What are you trying to do, how is bpmn-js involved, what does your setup look like?

5

Hi, I have the same problem in my vue 3 app with vue cli, when i try import any xml the following errors appear.

TypeError: 'get' on proxy: property '$pkg' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '[object Object]')

image

image
image1708×321 27 KB

When i comment 7912 line importXml works properly.
bpmn-js version: “8.5.0”

Any idea how i can solve this error ?

6

Hello, my question, like the one downstairs, I have tried. This error will appear in bpmn.js low version or high version.

My application scenario is the flow chart design on the web (vue3, ES6)

7

What does your development setup look like?

8

I also met the same problem, how to solve it

index.vue:101 TypeError: 'get' on proxy: property '$pkg' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '[object Object]')
    at Proxy.Registry.getEffectiveDescriptor (index.esm.js:550)
    at Proxy.Moddle.getType (index.esm.js:768)
    at RootElementHandler.ElementHandler (index.esm.js:269)
    at new RootElementHandler (index.esm.js:526)
    at Reader.handler (index.esm.js:917)
    at Proxy.BpmnModdle.fromXML (index.esm.js:56)
    at BaseViewer.js:144
    at new Promise (<anonymous>)
    at Proxy.importXML (BaseViewer.js:138)
    at Proxy.<anonymous> (CompatibilityUtil.js:33)
9

Using “markraw” to cancel the proxy object

10

Did someone fix this issue? We also meet the same questions:

11

Hi @besley

I tried to replicate your issue, but it worked: restless-wave-hsg6f - CodeSandbox

To share complete setups, create and link a CodeSandbox. This way, we can inspect the problem at hand in action and, thus, can help you in a timely and more effective manner.

Cheers

12

After I used a Vue3 template, and copy files into the project, it still throw the type error. Please you can access this sandbox link. Thanks！

13

Seems like vue proxies some internals.
I’m not an expert in it, but ensuring that vue does not proxy the Modeler resolves the issues:

14

It seemed that Vue3 is not incompatible for some reason, if making a comment for this line:

file name:node_modules\moddle\dist\index.esm.js

// define package link
//this.definePackage(descriptor, descriptor.allTypes[descriptor.allTypes.length - 1].$pkg);

It works fine, this is a solution from Smok. But hope someone can get a finally solution.

Thanks!

15

Thank you for following up and helping root cause the issue :slight_smile:

If you want to dig deeper, you can find the source code for moddle here: GitHub - bpmn-io/moddle: Meta-model based data structures for those who need it
We always appreciate Code Contributions to our projects.

Cheers