Our application is a React/Node app built with Webpack and renders server side in production. In this production scenario, the mapbox-gl package has a problem loading on the server side. I suspect this has something to do with the way mapbbox-gl.js is an already browserified library, and doesn't play well with this server side environment that is built with webpack. Below is the relevant error when I try to load the page for the first time and we don't get any of the component's html generated on the server side (though everything works when it then loads in the browser client).
The relevant line of code in mapbox-gl.js that generates the error at the top of the stack reads "module.exports=self;".
Node app is running on port 5000
ReferenceError: self is not defined
at Object.112 (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:225:29)
at s (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:602)
at eval (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:653)
at Object.110../window (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:221:25)
at s (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:602)
at eval (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:653)
at Object.24.../package.json (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:48:26)
at s (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:602)
at e (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:773)
at eval (webpack:///./~/mapbox-gl/dist/mapbox-gl.js?:1:791)
Hopefully there are some tweaks I can add to our webpack build config to make this work. Sorry there isn't a lot of info here, I'm hoping that someone has come across this problem and there might be an easy fix.
Actually, when it comes to server-side rendering, this kind of scenario is very common which is some library rely on DOM exist or browser environment.
Solution:
1. In the webpack configuration, define a variable for indicating whether the application is running on server side.
new webpack.DefinePlugin({
__CLIENT__: true
// Other global variables
}),
2. Inside the files that using the mapbox library
let mapboxGl;
if (__CLIENT__) {
mapboxGl = require('mapbox-gl')
}
3. Server side entry code
global.__CLIENT__ = false;
4. For using webpack for both client-side and server-side, using webpack-isomorphic-tools
I was facing the same problem on Nuxt.js. In order to solve this problem the mapbox package should be imported on the client side only.
Here's the code:
let mapboxgl;
// Check if the process is on the client side
if (process.client) {
mapboxgl = require('mapbox-gl');
}
Related
I am trying to use Inferno to render on the server. The documentation inferno-server and server-side-rendering does not say show to set-up babel & run the sever.
All I could find is InfernoJS Babel Plugin but noting about running it on Node.
Any help would be appreciated.
Could you explain what you mean by "Running on node"?
Inferno Babel plugin converts the JSX code into a regular JS code, which runs without problems on node (the server uses renderToString). While you are not using browser elements (document and other tools), everything should be fine.
Then you need to make a separate component for the client, which when requested will be given as a bundle along with the html page, and then using hydrate function to "cling" into webpage and bind items.
you can check my repository (although this is for TypeScript): https://github.com/MrFoxPro/inferno-isomorphic-tempalte
I am making a Firefox Extension and I want to log the errors/messages/exceptions produced by the extension code using Sentry.
I tried the JavsScript Raven client but I guess its not really made to live inside the "Content" context.
The error I get is: message = "debug" is read-only, but my actual question is, how do I go about integrating Sentry in a Firefox Addon?
PS: No, this wont go into general distribution, my api keys are safe.
What I did was just to omit calling .install() and just use the error/message reporting.
There will be no automatic catching and source code but it works for my purposes.
I try to create the entity like this:
DatastoreService ds = DatastoreServiceFactory.getDatastoreService();
Entity stock = new Entity("Stock", 1);
stock.setProperty("Stock", "FCB");
ds.put(stock);
but keep getting the error:
No source code is available for type com.google.appengine.api.datastore.DatastoreService; did you forget to inherit a required module?
The error means just what it says, the GWT compiler needs access to the Java source it compiles to Javascript, and obviously DatastoreService is not something that should exist on the frontend - so you have an architecture issue here.
You'll need to write a proxy that can call a server component (Which in turns calls the DatastoreService) and returns DTOs/value objects (that you define and thus have the source for).
Cheers,
No source code is available
GWT transliterate Java to Javascript, reading it's source code and there a limited language support.
What you're trying to achieve is a Server only operation and you're adding this operation within the client code, which will run on a browser. Neither GAE allow this or GWT has the source of these classes nor capability to do so.
Solution
You need to create a request to your server that will access the DatastoreService , the return the output to the client code.
Below a example of a properly architect GWT web application:
My question is very basic on one hand but on the other hand the general situation is more complex, plus I cannot really get any working sample.
I'm developing/maintaing a web-application which is currently in transition from GWT code base into Ember.js.
Most of the newer code already relies on Ember.js and I think it's really awesome.
The problem is we cannot use Ember Router as all the request are being handled by the GWT.
In order to enabled the application run in this unusual configuration we have special JavaScript files that create our Ember main objects (Controllers & Models) for us.
As you can imagine navigation between tabs is cumbersome and is handled by GWT who creates Ember objects when needed. We are in transit toward a brave new world Ember Router and all.
But in the meantime, this is the problem I'm facing right now.
The user clicks a link which opens a page that contains some Ember based table.
The data is retrieved form the server using some Ajax code. Upon success it spawns a forEach loop which tries to pushObject all the received date into our Ember based components.
My problem happens when the user quickly switches between tabs. In this case the first list of object has not finished rendering yet and suddenly there's a new set of objects to handle. This causes Ember to throw errors like:
"Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM. "
and
"Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist."
Is it possible to prevent the loop from trying to render?
I've tried checking if the controller in question is already inDOM and it is, is there a way to notify Ember this object is no longer valid?
Sorry for a lengthy question and lack of running sample.
I'd probably modify the switch tab code to only execute afterRender has completed, that way you aren't mucking with ember objects while they are being used.
Ember.run.scheduleOnce('afterRender', this, function(){
// call GWT switch tab routine
});
Thank you Daniel and Márcio Rodrigues Correa Júnior. eventually what I did is to add a patch that would check the current context of the application (in my case the currently selected tab). If upon receiving the AJAX response the application is in the correct context (meaning the user haven't change the tab) go on. Otherwise just ignore the response and do not try to render it.
Now it seems to be working
I need to use ZendAMF on a symfony project and I'm currently working on integrating the two.
I have a frontend app with two modules, one of which is 'gateway' - the AMF gateway. In my frontend app config, I have the following in the configure function:
// load symfony autoloading first
parent::initialize();
// Integrate Zend Framework
require_once('[MY PATH TO ZEND]\Loader.php');
spl_autoload_register(array('Zend_Loader', 'autoload'));
The executeIndex function my the gateway actions.class.php looks like this
// No Layout
$this->setLayout(false);
// Set MIME Type
$this->getResponse()->setContentType('application/x-amf; charset='.sfConfig::get('sf_charset'));
// Disable cause this is a non-html page
sfConfig::set('sf_web_debug', false);
// Create AMF Server
$server = new Zend_Amf_Server();
$server->setClass('MYCLASS');
echo $server->handle();
return sfView::NONE;
Now when I try to visit the url for the gateway module, or even the other module which was working perfectly fine until this attempt, I only see a blank screen, with not even the symfony dev bar loaded. Oddly enough, my symfony logs are not being updated as well, which suggests that Synfony is not even being 'reached'.
So presumably the error has something to do with Zend, but I have no idea how to figure out what the error could be. One thing I do know for sure is that this is not a file path error, because if I change the path in the following line (a part of frontendConfiguration as shown above), I get a Zend_Amf_Server not found error. So the path must be correct. Also if I comment out this very same line, the second module resumes to normality, and my gateway broadcasts a blank x-amf stream.
spl_autoload_register(array('Zend_Loader', 'autoload'));
Does anyone have any tips on how I could attach this problem?
Thanks
P.S. I'm currently running an older version of Zend, which is why I am using Zend_Loader instead of Zend_autoLoader (I think). But I've tried switching to the new lib, but the error still remains. So it's not a version problem as well.
got it...
I was not using
set_include_path()
while loading Zend. It's still odd that it would give such a cryptic error, but this was the missing piece indeed.