I'm having an issue where in production only (not development) I get hundreds of cannot read property 'click' of undefined with 3-30 on each click, and a few cannot read property 'submit' of undefined. This very well may not be an issue with Meteor but with my code, so I'm just looking for any ideas why this may be happening or how I can debug it. All my events are either in Template.events or Template.rendered. It happens on every page and no matter where I click.
There are a couple of things that can cause this.
The first is that in production mode latency is a lot higher. So if you've automatically assumed that when a template is rendered the data is ready you could get all sorts of undefined as the object's are null for a very short time when meteor initally loads.
You could check your code to see if you've used any findOne or find. You need to ensure that the result of your query is properly handled in the case that there aren't any results, for that initial load. i.e
var data = myCollection.findOne(...);
if(data) {
....
}
or
var data = myCollection.find(...);
if(data.count()>0) {
....
}
The other thing that might cause it are atmosphere packages that you're using that might not be mapped correctly.
To check this have a look at your network tab in the chrome inspector:
Look through for files whos extensions don't match their content (js & css files).
If a file is a .js file it might have HTML content (Meteor doesn't serve up 404 errors, instead giving them html whichever path is called, so no explicit errors are given).
If this is the case figure out which file it is and map it correctly. (You might be calling click to a plugin that didn't load correctly). In production mode files are minified and the package paths change so this might also be it.
Related
I am developing a react application with the bundler Webpack.
I would like to debug this application with a browser console (here i use chrome).
I have used source-maps and equivalent in my webpack config:
devtool = 'inline-source-map';
Now errors are displayed with the exact line of the original file.
The problem is that i want to access to live variables with the console.
So far I found two ways to display them:
1- Add a library in webpack.config.js
output: {
library: "lib"
},
export variable in the code export var foo = 34; and finally inside the browser console use lib.foo.
2- use breakpoint and access to variable set in the file
Is there another solution to access live variables?
Thanks
There are other solutions, but that means defining global variables and that should be avoided as it can have side effects in the code you're trying to debug, so you might run into problems that are not identical with and without exposing the variables, which makes your debugging experience very frustrating.
Using breakpoints is the best you can do for debugging purposes. The browser debuggers, especially the Chrome devtools, are extremely powerful and it's absolutely worth spending some time to get familiar with them.
Because pausing the app at every breakpoint you set for getting to a certain point can be tedious, you can use conditional breakpoints. One way is to use the debugger statement in your code, in that case you can guard it by any JavaScript you like, for instance this will only pause when the input to the function is 5:
function debug(input) {
if (input === 5) {
debugger;
}
// Other code
}
Another way is to add conditional breakpoints in the Chrome devtools. As you've configure source maps, you can set the breakpoints in the original source under Sources > top > webpack:// > .
To set a conditional breakpoint you simply right-click a line and choose Add conditional breakpoint... and enter the condition, e.g. input === 5. You can also Edit breakpoint... to change or add a condition to an existing breakpoint. For more information about breakpoints in Chrome see Pause Your Code With Breakpoints.
In the Sources tab you can also right click anywhere and Add folder to workspace so you can edit the sources directly and save the changes to disk (in older versions of Chrome it's a bit more complicated to add a folder to the workspace). To let Chrome know that the source maps of webpack correspond to your workspace, you can right-click any webpack source map and select Map to File System Resource... and you simply choose the correct file of the workspace. After that, all the sources of webpack should automatically be mapped to the correct files. Now you can set the breakpoints there and when you change something and save it (Ctrl + S or Cmd + S), webpack will recompile it. See also Set Up Persistence with DevTools Workspaces.
Sometimes setting a breakpoint might be too much effort for only getting values of variables. With just console.log you probably end up with a lot of different messages. To make it easier to find the messages you need, you can use console.group which lets you put messages inside a group, that can be expanded and collapsed. The groups can also be nested. Use console.groupCollapsed if you want the group to be collapsed initially.
I am developing a videogame using EaselJS, a Javascript library.
My project works pretty fine offine, or on a local server. However, when I try to upload it on a website (ex: http://streetfighterjs.lixter.com/ ), it doesn't work anymore : my sprites aren't loading, and nothing is shown in my canvas.
The strange thing is that I tried to use PreloadJS to preload my images, but it doesn't seems to work. I was wondering if anyone already had this kind of problem, and how did he made to fix it.
You only included easel.js and sound.js.
preload.js is missing. Therefore createjs.LoadQueue is undefined.
Just include preload.js and your code should work.
You need to include preloadjs in your head (or prefferably just after your footer element).
In my project right now, I have the following order and it works fine:
<script src="../js/vendor/easeljs-0.7.1.min.js"></script>
<script src="../js/vendor/soundjs-0.5.2.min.js"></script>
<script src="../js/vendor/preloadjs-0.4.1.min.js"></script>
You should check your console from time to time:
Which is occuring from this line:
Sounds like PreloadJS is not included, or not loaded. Can you provide
a link to the sample?
Source
You are getting a typeffor from perso1 which is undefined. I notice that you are creating your perso1 global variable, but you are not actually saying what perso1 is equal to. Well you might be later in the code, but when you are getting that typerror, perso1 is not yet set.
Currently, the issue with the site is that perso1 is undefined during your tick (deplacement function). This will happen as long as the first image (imgPerso1) is not loaded.
I am also seeing XMLHttpRequest errors in the console, indicating that something is attempting to load cross-domain. If your LoadQueue is causing this, then you might want to change it to load content using tag-based loading instead of XHR:
new createjs.LoadQueue(false);
A few miscellaneous notes:
1. You don't need to constantly call stage.update() when you make changes, because you have a ticker that will constantly update the stage for you.
2. You are still using the default timing mode for Ticker (timeout-based). There is no useRAF property in version 0.8.1 - instead set the timingMode of the Ticker:
createjs.Ticker.timingMode = createjs.Ticker.RAF;
Hope that helps.
I am getting this error in Chrome's Developer Tools:
Uncaught TypeError: undefined is not a function
This error is referencing this line of my main.js file. These two lines are both causing this error to happen:
jQuery("#signupfrm").fadeToggle('fast',function(){
jQuery("#loginfrm").fadeToggle('fast',function(){
I am getting this error when working on the website on my local computer, but it's from a theme I purchased that has a demo available online.
Here's a working copy of this same template:
https://www.whmcsdesigns.com/demo/cart.php?a=add&pid=1&systpl=flex
Just select "I will use my existing domain and update my nameservers" and enter any domain name. You'll be taken to a page where personal info can be entered. You will see that you have the option to select between "New Customer" and "Existing Customer". It works at the link above.
However, on my local server it's not letting me switch between new and existing. It just gives the error show above and is referencing those lines with signupfrm and loginfrm.
I'm guessing since it's working on the link aboving, those functions must be defined. Can anyone else find where those are being defined at?
Things that I suspect to be the problem:
jQuery hasn't been loaded correctly so the jQuery function can't be performed. It might not have been loading at all or it might be called $, but if other calls to jQuery work it should be OK.
fadeToggle is a part of jQuery so I expect that to work if jQuery is loaded
jQuery("#signupfrm").fadeToggle('fast',function(){
sometimes if you load dynamically and you test on C:\ or whatever local path things don't work the same, especially AJAX calls. Set up a local webserver to work on always, just using localhost on a simple Apache is a good start
I had a working jQuery Progress Bar code (http://jqueryui.com/progressbar/) in a huge web site until a new release crashed it with error "Uncaught TypeError: Object [object Object] has no method 'progressbar'".
I identified the root cause as jQuery being added more than once which somehow happened during the release process. Many other places on the website, for example, where jQuery Chosen (http://plugins.jquery.com/chosen/) was used, crashed as well.
I managed to fix it using jQuery.noConflict(); before the problematics calls and everything went back to peace. New release to the production environment and everybody's happy.
Turns out though that everything else but the jQuery Progress Bar is fixed. To make it even more fun, I went back in my testing environment and absolutely everything is working there, including the Progress bar.
I compared all the files on the server with those in my test environment and the code is exactly the same. All other JavaScript works with no problems on the server but the jQuery Progress Bar would only continue to work in my test environment but not in Production where the "Uncaught TypeError: Object [object Object] has no method 'progressbar'" persists. Any ideas or hints what could be the issue?
This type of errors occur not because conflicts, but because by the time your html loads, jquery starts executing., and find null reference to which you are trying the ui. The best way to do is, put the <script> tags at the end of the document. Then, probably, your html would have been loaded, and the object to which you attached the progressbar will be ready to be attached to.
And, Since our test environments are local, script files will be local and load instantly which is not the case with production and you can not be sure of different people's bandwidths. And, these things sometimes work to fool us as they do with cached files, for the second time onward, but may not work for every client as well.
I have run into an issue that I believe is rooted in the implementation of anchor tags in Rhino. Although I am utilizing env.js, I suspect perhaps I am not configuring something correctly.
In particular, my issue occurs while I am attempting to write unit tests against code written for an angularjs application. When I include angular.js (versions 1.2.1 to present), I get the following error:
TypeError: Cannot call method "charAt" of undefined
I am convinced the error is the result of this call to urlParsingNode.pathname since a console.log call reveals that the pathname object is undefined.
I traced the instantiation of the urlParsingNode to this line where we see that it is the result of a call to document.createElement("a"); Further down, we see that they set the href attribute in this line in hopes that the created anchor tag will utilize the browser to correctly parse the URL.
I have to believe I'm not the first to attempt JS unit testing for angular via Rhino, but thus far I've not successfully Googled myself to a solution. Any tips will be greatly appreciated.
Found it and fixed it. The pathname getter/setter simply was undefined for HTMLAnchorElement in env.js.
I submitted a pull request, but unfortunately the project looks all but abandoned. I also couldn't figure out how to build it out to a single file. It appears perhaps someone has taken it upon themselves to break it apart into require.js modules. Not a battle worth fighting for my use case.
So for anyone else who hits this issue, I have the code you need below. It belongs in the HTMLAnchorElement.prototype. In my copy of env.js 1.2, this prototype begins on line 8075. I added the following at line 8118.
get pathname() {
var uri = Envjs.urlsplit(this.href);
return uri.path;
},
set pathname(val) {
var uri = Envjs.urlsplit(this.href);
uri.path = val
this.href(uri.urlunsplit(uri));
},
FYI, my particular issue is resolved with this pull request.