Select to view content in your preferred language

ES Modules not loading WMSLayer in electron when nodeIntegration enabled

1154
4
01-21-2021 10:33 AM
JohnWyant
Emerging Contributor

I'm programming w/ angular9, and have everything working w/ esri-loader and v4.16. I tried to update to 4.18 so that I could ditch esri-loader (which breaks my automated tests, different story) for es modules. Most things seem to work and everything compiles. However...

My browser gets spammed w/ the error below and my maps never load.

[esri.views.2d.layers.WMSLayerView2D]

"responseType 'image' is not supported in Web Workers or Node environment"

 

If I disabled nodeIntegration, the maps load but then I lose responsiveness and IPC. I've seen workarounds, but at the cost of security.

Am I just not permitted to upgrade to 4.18 es modules since I use electron (w/ nodeIntegration)?

0 Kudos
4 Replies
AndyGup
Esri Regular Contributor

Hi John, here's a proof-of-concept app showing how to use JS API 4.x ES modules with webpack 5 and Electron 11.2: https://github.com/andygup/electron-esri-map. This demonstrates that the underlying integration with webpack and electron is possible. What will be challenging is figuring out the right configuration permutations to get Angular, JS API ES modules, Webpack and Electron all to work together into one application. 

With regards to writing unit tests, we will have a session at the upcoming 2021 Developer Summit includes insight on writing unit tests with JS API ES modules and Angular 11.

0 Kudos
JohnWyant
Emerging Contributor

Hi Andy, is there a proof of concept that utilizes the WMSLayer within electron w/ nodeIntegration enabled? That combo is what I haven't seen work.

0 Kudos
AndyGup
Esri Regular Contributor

Nope, sorry. That Class has not been refactored.

0 Kudos
JohnWyant
Emerging Contributor

For future people that may come w/ the same question...

What I found is that nodeIntegration enabled so that you can do i2c communication w/ your app is NOT secure. Take a look on electron contextBridge: https://www.electronjs.org/docs/api/context-bridge

Once I made this switch, WMSLayer works and I technically made my app more secure.

0 Kudos