I was given the task to implement server-side rendering for a react application. I've followed the this tutorial: https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app and, afterwards, followed the exact steps on the actual application. Everything worked well with implementing the client-side rendering, but as soon as I continued with the server-side one, I got the following error: 'Reference error: window is not defined'
The problem is that the application uses scrollmagic, which is a client-side-only library (note: I added conditionals 'require' to any scrollmagic references in the code itself, but I can't find a way to bypass the module).
I thought about adding the scrollmagic library on the client-side, but as soon as I remove it I get an error from the 'require' statements.
I apologize if this is something obvious but I am new to JavaScript and have been searching for a couple of days and found nothing so far. If I can provide any additional information please let me know! Also, if you have any suggestions as to how I should handle this, I am all ears!
Best regards,
Andrew
The window object is a property of the browser/client, so you will not have access to it when executing javascript on the server. A library such as: https://www.npmjs.com/package/window-or-global can help, as well as adding conditional logic to check for the window object before executing code that depends on it.
In addition to the suggestion by #sconway to manually check for the presence of window when calling these client-side methods another method I have used in the past is to put that code in componentDidUpdate life-cycle method.
This method is guaranteed to not be called on the server, only on the client.
Related
Use case:
I'm writing system tests using Geb/Selenium (so outside of angular).
I want to decorate $http to log all requests/responses at run time.
and here's the catch: without touching the source code.
Before you rush to answer "use $provide#decorator", for example,
http://blog.xebia.com/2014/08/08/extending-angularjs-services-with-the-decorate-method/
That solution for this use case means adding a test hook into production code... that's normally a bad thing I want to avoid if possible.
Update: Geb allows you to run Javascript in the browser window. So just for the heck of it I ran the tutorial code to decorate $http. Unfortunately, it didn't work because apparently you can't re-config the app after it's been loaded. But even if it did work, this brings up another interesting point---I need to override $http before any modules have had a chance to use it.
Since decorating $http service would be the cleanest way of doing this, you can avoid polluting production code by using something like ng-constants and gulp/grunt to only add decoration code for a 'test' environment.
See related Q/A here: How do I configure different environments in Angular.js?
If you are inclined on changing this at runtime(where runtime takes place in a test environment), you may need to go 'closer to the metal' and deal with XMLHttpRequests: Add a "hook" to all AJAX requests on a page
I'm experiencing trouble with an angular-ui plugin (ui-select): for some reason, I cannot select any option.
Looking in dev tools and changing the ng-click attribute for the relevant DOM element to alert('test'); doesn't result in the alert being called either. This leads me to believe ng-click isn't being called for some reason.
Anyway, since I cannot find any information on this and I'm suspecting there might be a compatibility issue with another plugin or library. I'm wondering if there is any way that I can debug ng-click operations. I'd like to be able to pinpoint where in the event chain things go wrong.
There is a very useful post related to this post regarding why angular fails silently on errors in expressions
The work flow I have found to work for me is to first double check that your controller method or function that you are calling exists in your current scope. This can be a pain to debug, but often times I have found it's just a typo on my part.
I would start by putting debugger in the first line of that function or method and determining if your program haults there.
PS:
another explanation for this behavior
Load Chrome to your web site.
Press F12 for dev mode.
Go to Sources.
Set breakpoints in your JS files.
Using TypeScript, AMD, "requirejs", "breeze" but not "angular", I just upgraded from Breeze 1.4.0 to 1.4.6. Now, when "breeze" is loaded, it also tries to load "angular" which fails with...
Module name "angular" has not been loaded yet for context: _.
Use require([]) http://requirejs.org/docs/errors.html#notloaded
The problem seems to result from Breeze executing the following line.
var ng = core.requireLib("angular");
What have I done wrong so this code is executed anyway? Why does Breeze think that Angular has to be loaded?
When replacing the above line with the following, anything works fine.
var ng = undefined;
I'm having trouble reproducing this.
True, due to a peculiarity in the Breeze code, Breeze will execute the following line even when angular is not present
var ng = core.requireLib("angular");
... and that will fail with
Module name "angular" has not been loaded yet for context
because it can't find a library called angular.js (I assume you don't have it)
But that failure occurs inside another function (__requireLibCore) within a try/catch
function __requireLibCore(libName) {
var lib;
try {
if (this.window) {
...
if (window.require) {
lib = window.require(libName);
}
if (lib) return lib;
}
} catch(e) {
}
return lib;
Are you seeing some other code path in which this error is thrown?
UPDATE 11 December 2013
Thanks, #mgs, for your email explaining how you saw the exception. I summarize for those who read this later.
Breeze started looking for AngularJS in v.1.4.6. To be perfectly clear, Breeze does not need angular; it just wants to know if angular is available. Breeze doesn’t need knockout, jQuery or Q either. But under varying circumstances it may look for these libraries and use them if it finds them.
AFAIK there is no other way in requireJS to detect if a module has been loaded then to call require("angular"). Unfortunately, require("angular") throws an exception when it can't find that module.
Breeze itself does not fail because that call is caught in a try/catch. Many (most?) devs will never see this exception.
But #mgs has attached a requirejs.onError event handler ... which I hasten to add is a good practice. Of course his handler will see the "angular not found" exception even though Breeze caught it and moved on. He writes:
That “requirejs.onError” function is called, when Breeze tries to load Angular. In the real program this causes an entry into the log, and alarm bells are ringing. It was this entry that made me ask the question on StackOverflow.
What to do? I don't think Breeze can do anything unless someone knows a way to detect a loaded module without triggering the requirejs.onError event. I think it is up to the developer to compensate.
I recommend teaching your handler to ignore Breeze's attempt to find angular. Don't sound the "alarm bell" for this particular failure.
Alternatively, you could define a dummy module, as #mgs, did so that require finds an "angular" module. I'm not fond of this approach because it fools Breeze into believing that Angular is available and Breeze might act on that misunderstanding in the future. It's harmless today but who knows about tomorrow.
In any event, the mystery has been explained and suitable workarounds are now known. Thanks, #mgs, for the opportunity to explore this subject.
UPDATE 12 December 2013
We just released Breeze v.1.4.7 which includes the change you recommended ... using require.defined to check first if a module is loaded. Works like a charm.
I took the occasion to re-write the Todo-Require sample such that everything is loaded in a single require script line:
<!-- Require + main. All scripts retrieved async by requireJS -->
<script data-main="Scripts/app/main" src="Scripts/require.js"></script>
The documentation explains how it all works.
Thanks for your question and feedback.
you can force angularjs to be loaded by adding the following typescript line:
/// <amd-dependency path="angular"/>
alternatively you can make breeze depend on angular in your requirejs config.
Update In case you are not using angularjs you can safely exclude this file from your project : https://github.com/IdeaBlade/Breeze/blob/master/Breeze.Client/Scripts/IBlade/b00_breeze.ajax.angular.js
I have recently shown to my team leader the ElmahR Dashboard and now he wants to implement ExceptionsLog with ElmahR in all of our current projects, including those that are Winform Applications, and after many days of searching I can't find a way to add a Winform Application as "ElmahR source".
Does anyone have a clue?
ErrorPostModule in ElmahR.Elmah does not support Winforms apps because it's been written to be an ELMAH module, so it's tied to an ASP.NET lifecycle and cannot be easily adapted. That said, ErrorPostModule does not do anything so magic and can be easily taken as a guideline to write a small "handler" to be used in a Winforms app. Take a look at its code here, what you should do is:
replace what's in the OnInit method, which simply reads configuration bits and attaches the error handler
when an error occurs, handle it like it's done in the SetError method to post it to the right destination reading the configuration parameters you read before. You would reference ELMAH and create an Error instance from your exception, and then use ErrorJson.EncodeString to encode it
You may want to borrow the W3.cs file to simplify the http form compilation.
At some point I might generalize this work and put it in ElmahR.Elmah, but not sure when I'll be able to do it.
I just forked the elmahr source code to work on this, I want to post errors from console applications, so I'm going to remove the dependency on Elmah and create the "error" objects and send them to the dashboard.
It's a work in progress but can be used as starting point for solving your problem.
https://bitbucket.org/rudygt/elmahr
Update: the fork now include full support to post to ElmahR using a ServiceStack endpoint, using json over http. This remove the dependency over the original Elmah to publish errors to the dashboard. The first example is a C# Console Application
I've noticed that if I added new hook to a module after the module has been enabled,
the new hooks are not called.
I am trying to add hook_node_view, to control view of a content type from my module,
I am using the base name of the content type I am addressing lesson_node_view
Can some please explain to me ? and how to solve this issue ??
Thanks
Flush your cache, module_implements is cached. admin/config/development/performance has a Clear all caches button. See the Suppress caching (for development) for a way to avoid this and other problems during development.
When writing your *.module file make sure not to use "namespace".
The namespace cause hooks not to be recognized.
A utility code however may use a namespace.