Error while running inside of Electron #21
Comments
|
@kgs916 First, let me start by saying that I've never created an electron app that uses the ArcGIS API. I believe @odoe has. Based on that error, it looks to me like I did a little searching, and I came upon @odoe's suggestion to rename node's require before loading the JSAPI: https://geonet.esri.com/thread/160978#comment-623946 I would try just renaming Can you try that? |
|
@kgs916 I've seen that error before when trying to run a I haven't tried Here's a simple example you can try out really fast using electron-quick-start. Run the following commands in console: The quickstart app should launch. If it does then control-c in the console to exit the app. Change the index.html file to this: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
</head>
<body>
<h1>Hello World Part 2!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<div id="viewDiv"></div>
</body>
<script src="index.js"></script>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</html>And create require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
console.log("Require() loaded.");
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
});The last step is to run
|
|
Yeah, I've been wondering about the value of esri-loader in an electron app. I'm guessing the reaons to use it is b/c you have source that uses In that case, I wonder if using the Exclude and Require pattern would be a better solution. You could trade the run time complexity introduced by esri-loader for the the build time complexity of configuring webpack (or whatever bundler you're using) to exclude the |
|
RE: using RE: dedicated loader versus Exclude and Require...hmmm good question, and I think either pattern could actually work. The cool thing about Electron is you can use it with your favorite JavaScript framework such as Angular, Vue, React, Ember etc. It's all V8 JavaScript Engine under the hood. So, the pattern you use pretty much depends on your needs, likes, requirements, skillz and tolerances. RE: load times. The nice thing about Electron is the shell that loads the app is pretty lightweight and fast, so as you mentioned it seems reasonable that you may have a little more wiggle room for module loading that might not exist in a full-blown browser-based app. As for which pattern is best, it may actually take some A/B testing to compare dedicated loader versus exclude and require, or any other pattern that developer comes up with. From an Electron standpoint and with respect to the error above, the real key to app happiness is to carefully separate the Renderer processes from the Main process. The Renderer handles all the .html, .css and .js goodness. Bundling modules, transpiling etc for the Renderer works just like it does in non-Electron apps. For example, Electron even comes with it's own compiler. |
|
@tomwayson and @andygup, thanks for all the great info! I would like to avoid the "Exclude and Require pattern" if I can because I am using the Angular CLI and there is very limited access to the webpack build process to make the necessary changes. I managed to get this working with the Angular CLI making a very small change to the esri-loader. I created a pull request with the change: #22. I tried this out both inside and outside of Electron and it worked well. I can create an example demonstrating this as well if needed I just ran out of time this morning to get that pulled together. |
|
I have updated my example at https://github.com/kgs916/electronMap to include the change to the esri-loader. It is now working correctly both in and outside of Electron. |
|
Resolved in #22 |
|
@tomwayson I'm thinking about renaming electronMap to something a bit more descriptive. What do you think of I was also thinking to add an npm script to |
Maybe just ng-cli-electron-esri?
Go for it! |
|
I like the name. I have renamed the repo to ng-cli-electron-esri and updated it to use the latest esri-loader. Thanks for getting release out there! One more change that I want to make to this example before I consider it good-to-go is to use the angular2-esri-loader so that it matches the example gist. I've submitted a PR to update the angular2-esri-loader to the latest esri-loader as well tomwayson/angular-esri-loader#13. |
I am writing a mapping application that is going to be running inside of Electron. I am trying to use this to load the ArcGIS API for JavaScript modules but I am getting the following error:
The line of code that this is failing on is:
Because of the fact that this is running inside of Electron and therefor is loading in a NodeJS process the
require()function accepts a string as an argument rather than an array of strings.I have created a repo to demonstrate this issue. Instructions for running this application inside of Electron can be found in its README.
One possible solution to this issue is to use RequireJS for loading modules. This is generally not meant to be used in a NodeJS environment but should provide the API that you are looking for with the
window['require'](modules, callback)call.The text was updated successfully, but these errors were encountered: