Comments (13)
Hi @tomwayson,
sorry for the delay. My code cannot be published easily but I can suggest you a good starter kit from kriasoft to reproduce the problem.
You can find it here : https://github.com/kriasoft/react-starter-kit
To reproduce it, simply declare a Map component in component hierarchy, and use it in a page (for exemple Home) in router hierarchy.
In this component, load Esri Js with your library, and try showing it directly : it will be server rendered and you will touch the problem :-)
I will be unavailable next week but I can find some time the 1st week of 2018 to help you reproduce that
Cheers and happy XMas time :-)
from esri-loader.
Thanks @tgeorges
I would like to make this work, but unfortunately I don't have a server rendered react app nor the relevant expertise to test with.
If you manage to get this working and want to make a pull request w/ the fix, I'd be glad to review/merge assuming I can reason about the changes and that tests pass.
from esri-loader.
@tgeorges did your code work with a previous version of esri-loader
? BTW window
isn't available on the server. You may have to cut a special version of this library to bypass that. Here are some suggestions: webpack/react-starter#37
from esri-loader.
That's a good question @andygup, I can see how it would have worked w/ an older version and not this one, and that's what I was assuming, but would be good to confirm from @tgeorges.
I neglected to mention before that I have a WIP example of how to use esri-loader in an Ember Fastboot (server-rendered) app. That uses esri-loader 1.5^. One difference w/ Ember is that the addon that wraps this library explicitly overwrites the Promise implementation w/ Ember's RSVP. That said, I'm still a bit surprised the above line didn't cause an issue in Ember Fastboot b/c I believe that is executed before the code that overwrites it.
Which brings up a point that generally speaking if you want to use this in a server-rendered application you can not load JSAPI modules or render a map on the server side (b/c you can't run Dojo the ArcGIS API for JavaScript in node). So, any calls to the actual methods in this library need to be gated to a browser environment. For example, in my Fastboot example, I load the modules and create the map inside the component's didInsertElement()
lifecycle hook (which is equivalent to React's componentDidMount()
) because that hook is not executed on the server. I presume if @tgeorges had this working before, he was doing something similar.
We could implement a naive fix like Promise: window && window['Promise']
or Promise: isBrowser && window['Promise']
as suggested in the thread @andygup linked to. However, I'm reluctant to do that w/o actually being able to test it in a server-side environment where the current code is failing. Again, if @tgeorges wants to try that, and can confirm it works, and makes a PR, and it doesn't break in a browser, I'll be glad to merge it.
from esri-loader.
Hi @tomwayson and @andygup ! Thanks for your suggestions :-)
For now I have foolishly create that global context on the server side to ensure it works correctly :
import Promise from 'bluebird';
global.window = global.window || {};
global.window.Promise = global.window.Promise || Promise;
Its a not elegant solutions but working for now. What I can suggest is to use an universal implementation of Promises (working in both client and server sides) as a dependency.
What is your opinion ?
from esri-loader.
Thanks @tgeorges
I deliberately chose not to take a dependency on a promise library. I don't think that is needed to solve this problem.
I think we can do what I suggest above (Promise: window && window['Promise']
). esriLoader.utils.Promise
will be undefined
on the server, but it should never actually be invoked on the server, so that should be OK.
from esri-loader.
Ok I understand, do you need some support for that ? I think a simple test in your library to ensure that browser window is defined is enough
from esri-loader.
Well, since I can't currently reproduce the problem, I can't be sure that my suggestion would fix it. I'd prefer to have that confirmation before making that change and cutting a release.
Is your application's code available somewhere so I can try it myself?
Alternatively would you be able to reproduce the problem in a minimal react app created from one of the universal boilerplates, or at least point me to one that approximates your application's setup?
Left to my own devices I'd just try creating an app via Next.js b/c that looks like the fastest way for me to get something up and running, but I'm not sure if that would accurately approximate how your app is rendered server-side.
from esri-loader.
@tgeorges this should be fixed by installing esri-loader@^1.6.0
from esri-loader.
FYI - see https://github.com/tomwayson/esri-loader-react-starter-kit
from esri-loader.
Hi,
It is a pity that map cannot be rendered at the server side as well.
@tomwayson mentionned that it is because 'b/c you can't run Dojo in node' but isn't it doable as mentionned in the documentation:
http://dojotoolkit.org/documentation/tutorials/1.10/node/
Thanks !
from esri-loader.
@Biboba I've updated my comment above to be more accurate: "you can't run the ArcGIS API for JavaScript in node." I haven't tried it myself, but server-side rendering JavaScript maps is not trivial even w/o the challenges of trying to load Dojo modules.
Instead, I'd look into doing something like rendering a static image on the server and replacing that w/ the map once the ArcGIS API is loaded in the browser.
from esri-loader.
@tomwayson Thanks for your precisions !
from esri-loader.
Related Issues (20)
- drop IE support? HOT 2
- ArcGIS JS API 4.18 Sketch Widget graphics and graphic selection often do not render in Angular 11 application HOT 4
- angular esri-loader 4.18 graphics refresh bug HOT 4
- Sketch widget: graphics not visible HOT 2
- new `esri-loader-typings-helper` plugin for VS Code HOT 2
- esri-loader dojoConfig removed not able to set has: {"csp-restrictions": true} HOT 2
- isLoaded or ready prop? HOT 2
- switch release process over to use np HOT 1
- Is it possible to have crossorigin attribute when loading ArcGIS modules? HOT 8
- Clean up dependabot PRs HOT 1
- 利用BaseTileLayer.createSubclass进行扩展,读取离线tms瓦片。 HOT 3
- Esri sources don't get loaded from our server HOT 3
- wall o compile node_module/@types errors when you run tests HOT 2
- ERROR ReferenceError: Can't find variable: document HOT 2
- qustion:how to test esri-loader with jest HOT 7
- After upgrading ESRI/Loader from 2.5.0 to 3.6, Querytask.js library file is returning 404 error HOT 2
- Update product name in error messages at 4.26 HOT 3
- Are you using esri-loader with Angular and Zone.js?
- What is the latest version that supports Angular 14 and ESRI JS API v3.x? HOT 2
- How to change the default Map Language ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from esri-loader.