search

iVis-at-Bilkent / cytoscape.js-context-menus

A Cytoscape.js extension to provide context menu around elements and core instance
MIT License
87 stars 41 forks source link

Illegal constructor in 4.1 vs 4.0 #70

Open matthughes opened 2 years ago

matthughes commented 2 years ago

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 commented 2 years ago

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.

https://user-images.githubusercontent.com/8426741/172547038-f5b43254-acfa-454c-be85-cd486388365c.mp4

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

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

vanilla@1.0.0 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! vanilla@1.0.0 build: parcel build index.html npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vanilla@1.0.0 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

vanilla@1.0.0 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 commented 2 years ago

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 commented 2 years ago

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 https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus/blob/97877acfa77914ee01c4c74c12b0e1ccc362852d/src/context-menu.js#L285