MVC-Mini-Profiler Error: yepnope is not defined - javascript

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

Related

how can I fix files that are not showing in my local website?

I created a pokedex project with html css and javascript,when I try to open it with VSCODE it works fine,but when I try to open the html local file the broswer doesn't find 2 local files, it keeps saying that:
file:///C:/assets/js/poke-api.js net::ERR_FILE_NOT_FOUND
GET file:///C:/assets/js/main.js net::ERR_FILE_NOT_FOUND
the problem is that the files are working when I try to open in VSCODE.
https://github.com/joaogabriel1902/Pokedex-Challenge - in case someone likes to see the code.
I tried to uninstall some of the extensions that I have to see if would work.But nothing happened it keeps not finding the files.
I think the clue is in the error message
GET file:///C:/assets/js/poke-api.js net::ERR_FILE_NOT_FOUND
GET file:///C:/assets/js/main.js net::ERR_FILE_NOT_FOUND
You should not want your browser to be looking at C:/assets, unless you actually want to use the root folder of your hard disk, as your project folder (since "assets" is in the project folder itself).
Something has gone wrong in how you are telling the browser how to start the project. I suggest trying these steps.
Use Google Chrome
Drag the ".html" file from your explorer window, into the Google Chrome window.
That should trigger Chrome to open the HTML file in the right way.
How to access files in subfolders
Two ways seem to work for me:
<script src="./assets/js/main.js"></script>
or
<script src="assets/js/main.js"></script>
When I try a third way, however, I get an error message just like yours:
<script src="/assets/js/main.js"></script>
Attempt to fix
Your code does seem to be using one method that works on my system, so I am surprised that you are getting an error. However why don't you try the other method that works on my system, and see what happens?
Remove the ./ when accessing the Javascript files, by changing
<script src="./assets/js/main.js"></script>
to this
<script src="assets/js/main.js"></script>
Please let me know how you get on, because I am curious too.
Following way of code:
<script src="../assets/js/main.js"></script>

TestCafe: ReferenceError: Cannot access 'ModuleName' before initialization

Im using testcafe for testing our page for now bout 1 year.
On the latest version of our page, the devs used preloading and critical CSS for performance optimizations.
Since then i get an error on page startup:
ReferenceError: Cannot access 'ModuleName' before initialization
Is there a problem with TestCafe if a a page uses rel="modulepreload" to import js?
The DOM shows, that this module is part of a js-file that is preloaded like this.
<link href="//cdn.test.local/version1/dist/script/something.static.js" rel="modulepreload">
-> link wont work since the page is on a local site.
Content of js-file:
import{ModuleName}from'./classes/something.class.ajax.js';export const someAjaxPlugin=new ModuleName;
This Error does only occur if i run the page in testcafe... is that a bug?
Any one an idea what i can do so my tests will run again?

JQuery CDN not working, and local JS script not seen

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

What happens if polyfill script fails to download?

I have a SPA (built on webpack, with babel, etc) that includes a polyfill in the index.html:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,Array.prototype.includes,Element.prototype.remove"></script>
One use-case for the polyfill is in order to use the Promise API on IE 10-11.
My error monitoring reporting an error on an IE 11 client of the following:
ReferenceError: 'Promise' is undefined
So I assume that particular session failed to download the polyfill for some reason.
My question is: How should I deal with this case? Is it a scenario I should expect to happen sometimes? Is the user expected to noticed the application not working properly, and reload the page?
There is an error event you can attach to allow for more control if you are really worried. You don't usually need to handle this explicitly though.
In this particular case you could migrate towards using babel to build a bundle with polyfills included in your scripts. This adds an additional build step to your process though.
Since you mentioned you're using webpack, it would just be best to include the necessary polyfills directly in the project via an import statement (something like core.js) rather than using a cdn - polyfill.io.
However, you could alternatively add an ID to the script element and listen to the onload and onerror events to determine whether the script (un)successfully loaded like so:
<script id="polyfillScript" src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,Array.prototype.includes,Element.prototype.remove"></script>
In your project index.js:
document.getElementById('polyfillScript').addEventListener('error', () => {
alert('Failed to load polyfill!');
});

google charts loader google.charts.load not triggering callback

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.

Categories