Illegal constructor in 4.1 vs 4.0

[matthughes]

Any idea why this example (https://codesandbox.io/s/l2r00?file=/src/index.js:860-876) works with 4.0.0 but fails with 4.1.0? You can change the version easily on the left-hand side. Only difference I can see between the releases is an upgrade of webpack from 4 -> 5. Is it possible that broke something with module export?

[canbax]

Hi @matthughes Firstly codesandbox environment is very weird. I created a fork https://codesandbox.io/s/suspicious-fire-ucnnq0?file=/package.json and used 4.1.0 there. When I refresh this on my browser with my account signed in I see nothing. Not even an error. Firstly it renders canvas, then it disappears, then I don't see anything in logs.

signed.in.codesandbox.mp4

Secondly, if I open this link on a private browser window, I see no error. It just works!

Thirdly, I downloaded a copy to my local machine. I tried to run it on my own machine. I executed npm run build and npm run start I get errors on both of them. See below logs

PS C:\Users\Exper\Desktop\ucnnq0> npm run build

[email protected] build C:\Users\Exper\Desktop\ucnnq0
parcel build index.html

× C:\Users\Exper\Desktop\ucnnq0\src\fonts\NokiaPureText-Regular.ttf: ENOENT: no such file or directory, open 'C:\Users\Exper\Desktop\ucnnq0\src\fonts\NokiaPureText-Regular.ttf'
Error: ENOENT: no such file or directory, open 'C:\Users\Exper\Desktop\ucnnq0\src\fonts\NokiaPureText-Regular.ttf'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: parcel build index.html
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Exper\AppData\Roaming\npm-cache_logs\2022-06-08T06_20_09_494Z-debug.log
PS C:\Users\Exper\Desktop\ucnnq0> npm run start

[email protected] start C:\Users\Exper\Desktop\ucnnq0
parcel index.html --open

Server running at http://localhost:1234
× C:\Users\Exper\Desktop\ucnnq0\src\imgs\ic_router_circle.svg: ENOENT: no such file or directory, open 'C:\Users\Exper\Desktop\ucnnq0\src\imgs\ic_router_circle.svg'
Error: ENOENT: no such file or directory, open 'C:\Users\Exper\Desktop\ucnnq0\src\imgs\ic_router_circle.svg'

So as a result I can say I cannot reproduce the issue properly

[matthughes]

Do you have a test or demo project that uses module support in 4.0? Because in my work project, 4.0 works but 4.1 does not. When I require the module in 4.1 it shows up as undefined whereas everything works in 4.0 so it seems like something changed in the module export.

[canbax]

I tried to run a local version with node v10.15.3 and npm 6.14.15. I still get some errors but fixed them by copy-pasting the "imgs" and "fonts" folder into the "src" folder.

Now I can run locally but still, I don't see any error. I'm using Google Chrome 102 on Windows 10. What browser and operating system are you using? It might be related to the browser or OS.

Also, I see https://stackoverflow.com/questions/61881027/custom-element-illegal-constructor it looks pretty related since we are defining custom elements. You might try calling the static define functions inside the class definitions

cytoscape.js-context-menus/src/context-menu.js

Line 285 in 97877ac

static define() {