I have a mysterious error which only started occurring today. I am using the google charts library in my angular2 web application and I load the appropriate package before initialising the app. This morning when I tried to reload the page, nothing happened!
I am using systemJS as my module loader for the project. To load the google charts package before starting the application, I have this line near the bottom of my systemjs.config.js:
google.charts.load('current',{ 'packages': ['corechart'] } );
google.charts.setOnLoadCallback(go);
function go(){
console.log('go!');
System.import ( baseUrl + '/app/main.js').then(null, console.error.bind(console));
}
My problem is that, from this morning, go is not called!
I have checked that the loader is being downloaded and it is. It is using version 45 and has been for a while. Nothing new here.
I have checked just in case the function name go was too generic and defined elsewhere - this is not the case.
google.charts.load is not throwing any errors at all.
No requests are being made on the network from the loader.
I am getting this error when running the project locally, and currently I'm getting no errors on the production site.
Any Ideas would be very much appreciated - thanks in advance!
Update
I have been able to load the visualization object with a bit of a bodge. I've specifically loaded version 45 of the loader:
https://www.gstatic.com/charts/45/loader.js
and then in my configjs I have:
google.charts.versionSpecific.load('45',{ 'packages': ['corechart'] } );
The setOnCallback still doesn't work, but I reckon that at the moment, the library downloads before it is needed, so I don't get any errors. This is not an ideal solution, or even a correct one. I would still like to find the root cause.
Update 2
As of this morning, the exact same code is working again. I can only think that there must have been some temporary change in the code in the loader that caused it to not do anything useful. I will have a look in the forums to see if there is any evidence of this.
Related
I'm working with Tabler (tabler.io) trying to migrate some of the templates into my own CMS installation. The problem I'm running into is that I'm trying to load all of the scripts using RequireJS (requirejs.org), and ApexCharts (apexcharts.com) is not loading properly. The relevant parts of my RequireJS config are as follows:
requirejs.config({
shim:{
'apexcharts':{'exports':'ApexCharts'}
},
paths:{
'apexcharts':'https://cdn.jsdelivr.net/npm/apexcharts#3.23.1/dist/apexcharts.amd'
}
});
It is my understanding that by identifying the exports parameter, RequireJS binds the module to the window object, but in Dev Tools window.ApexCharts is undefined, even though the script shows as being loaded. I've tried both the apexcharts.min.js and apexcharts.amd.js scripts and no luck with either.
I have code later on in the project that depends on ApexCharts being loaded but it doesn't pass the existence check for ApexCharts. The sample below doesn't completely run because $(window).ApexCharts is undefined.
requirejs(['jquery','apexcharts'],function($,ApexCharts){
$(document).ready(function(){
$(window).ApexCharts && (new ApexCharts($('#chart-revenue-bg'), {...})).render();
});
});
The original template from Tabler.io uses the apexcharts.min.js script, but as a result of my research into issues with RequireJS, I came across the following Issue reported on Github and tried the apexcharts.amd.js script as well as a result:
Loading using Require.js (AMD) broken #357
Anyone have insight into what I'm doing wrong here? (I'm not seeing any errors in the console, so I'm stumped)
CODEPEN example illustrating issue: https://codepen.io/cjholowatyj/pen/eYBZmrb
paths:{
'apexcharts':'https://cdn.jsdelivr.net/npm/apexcharts#3.23.1/dist/apexcharts.min',
'capexcharts':'https://cdn.jsdelivr.net/npm/apexcharts#3.23.1/dist/apexcharts.common',
}
and then:
define(["capexcharts", "apexcharts"], function (c, ApexCharts) {
});
see this link: https://codepen.io/waleed3amer/pen/GRMNYaQ
I can't understand this for the life of me. I normally work with Python, but am trying to dabble a bit in web development with JQuery. I've used the CDN from google, and have done everything from putting the script below the footer (A site I found said that was the best spot), to moving it up into the header (every other site I've been to since says that is the best spot), and nothing works.
From the error in the inspection tools 'Loading failed for the with source “http://localhost:63342/HTML/Omnifood/resources/javascript/script.js”.' It suggests to me that it can't even find the .js file I created to hold my code, but it is there, defined. (See screenshots attached)
Any help getting this sorted out would be appreciated.
Screenshot of HTML and file structure, as well as error in inspection tool:
Edit: The issue has been resolved in so far as the folder has been moved to the correct location (/resources/javascript/script.js), I even went in and added type="text/javascript" to all the script files just in case. Now when attempting to run script with following JQuery code:
$(document).ready(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
I get the following errors in inspection tool:
The path is wrong http://localhost:63342/HTML/Omnifood/resources/javascript/script.js
your script.js is at
http://localhost:63342/HTML/Omnifood/vendors/javascript/script.js
In an HTML script, a call to fetch a package ending in vega#n where n is a version number, is being incorrectly expanded and causing a 404 error. I'm trying to find out why, and to prevent this.
Apologies in advance for the long-winded explanation, but I'm not sure where the problem lies so I'm trying to be as specific as possible.
I'm following the user guide to try and load a vis into a jupyter notebook. This executes the script in-browser, I believe, but for some reason has support for requireJS, which means that global modules aren't correctly loaded when using the import method, which basically uses html's <script> tags to load the module.
This can be worked around by calling define, as described in a similar problem with D3, here: https://github.com/mpld3/mpld3/issues/33#issuecomment-32101013.
I've written this gist to show a working example:
https://gist.github.com/lJoublanc/439e2f687b7aedd6fbdea5adab5cee0f
However, for some reason (either requireJS or something else - my JS knowledge is limited), expands URLs of the form https://cdn.jsdelivr.net/npm/vega#3 into something like https://cdn.jsdelivr.net/npm/vega#3.js?v=20180324103700 which results in a 404 error.
Using the github URL (i.e. without the #3) works fine though.
Any idea if this is requireJS doing this, or the CDN? How would I work around it?
I need to expose better error detail from requireJS "load timeout for modules" errors so I can actually debug to find out what is causing the load timeout.
I'm unable to get the error to appear on my development machine, but roughly 10% of our daily visitors are experiencing this error in the production environment (track.js is being used to gather these errors for visibility).
The error is being thrown for my main.js file ("load timeout for modules: main") - the application entry point. I've added the errback callback to try to log the error detail here but this error doesn't seem to hit this callback so it seems as though everything main.js is requiring is fine.
I've added a global override for requirejs.onError and all I get here is the module name (main.js) and an error code of timeout.
I've used madge and have verified that there are no circular dependencies.
I have optimized the build using r.js optimizer.
I have set waitSeconds: 0 in require config (by my understanding should disable the timeout completely)
How can I find out what module that is being required somewhere down the line is actually causing the timeout? Anything further to go on would be very helpful - I'm finding this incredibly hard to track down. Thanks.
you can set waitSeconds in config of requireJS. By default it's 7 seconds. I do not know the exact answer to your question but this can be a temporary solution. Probably someone from users has a very slow internet. and it is not enough 7 seconds.
You can test in in Chrome devTools -> Network tab -> Throtling selector. And select for example "2G regular 450 kb/c". I assume that you will see this error. Also, this error sometimes occurred when I used CDN.
from James Burke himself. .....However if the difficulty is that your "main" is taking a long time to load, that script holds the requirejs.config() call with waitSeconds, and it was loaded via data-main, then the requirejs.config() call may not be called in time for it to be useful. For that issue, you can pass waitSeconds using "requirejs as initial config".
<script>var requirejs = { waitSeconds: 0 };</script>
<script src="require.js" data-main="main"></script>
This worked perfectly.
I am using the mvc-mini-profiler to profile my MVC site. It runs fine on my local machine, but when i publish to my hosting server, the profiler doesn't load, and i get the following error:
yepnope is not defined
yepnope([
As far as I can tell, the problem lies in the profiler trying to use yepnope before yepnope has been loaded. Is there a way around this, maybe by forcing a check to see if yepnope has been loaded before executing the miniprofile render command? Here are the relevant lines from the page's generated source
<script type="text/javascript" src="/mini-profiler-yepnope.1.0.1.js"></script>
<script type="text/javascript">
yepnope([
{ test: window.jQuery, nope: '/mini-profiler-jquery.1.6.1.js' },
And for completeness, the calls in my _layout file
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
#MiniProfiler.RenderIncludes(position: RenderPosition.Left, showTrivial: false, showTimeWithChildren: false)
Check if you are getting a 404 error when trying to load yepnope.js. There was a bug in MvcProfiler in dealing with application path, which has been addressed
in later builds.
MVC Mini Profiler includes not respecting application's path
Make sure that you aren't clearing your routes when registering them for your site. The mini profiler adds its own routes for those javascript files to the RouteCollection potentially before your site is initialized.
In case anyone else has this problem, it has been submitted to their google code project. It is a known issue, and they are working on it.
Issue Page if you want to track it