I'm using typescript in my .net core application and I'm managing my scripts with requirejs.
So there's a button in my footer that when click it, it calls my .net core action, receives data and shows the result on the surface.
_Layout.cshtml
<div class="fixed-bottom">
<footer>
<a id="debug_button" title="Show/hide debugging">
<span class="fas fa-code"></span>
</a>
</footer>
</div>
<script src="~/lib/requirejs/require.js" data-main="/js/config"></script>
<script>
require(['../ts/debugarea'],
function(debugarea) {
debugarea.buildDebugArea(false);
$("#debug_button").click(function() {
debugarea.buildDebugArea(true);
});
});
</script>
the js/config.js
require.config({
paths: {
jquery: "../lib/jquery/dist/jquery",
bootstrap: "../lib/bootstrap/dist/js/bootstrap",
backbone: "../lib/backbone/backbone",
underscore: "../lib/underscore/underscore",
modernizr: "../lib/modernizr/src/Modernizr",
unobtrusiveajax: "../lib/Microsoft.jQuery.Unobtrusive.Ajax/jquery.unobtrusive-ajax.min",
CookieMonster: "../ts/http/CookieMonster",
debugarea: "../ts/debugarea",
signalr: "../lib/signalr/dist/browser/signalr"
},
shim: {
backbone: ["jquery", "underscore"],
bootstrap: ["jquery"],
Modernizr: {
exports: 'Modernizr',
},
unobtrusiveajax: ["jquery"],
debugarea:['jquery']
}
});
and the debugarea.ts
import * as $ from "jquery";
console.log("debugarea");
console.log($);
export function buildDebugArea(switchCookie): void {
let currentCookieValue: string = CookieMonster.CookieMonster.getCookie('debugarea');
if (switchCookie) {
if (currentCookieValue === "")
CookieMonster.CookieMonster.setCookie('debugarea', "true", 1);
else
return clearDebugArea();
} else if (currentCookieValue === "")
return clearDebugArea();
$('#debuginfo').append($('<div id="cookieinfo"></div>'));
getCookies();
let debugbuttonIcon: JQuery<HTMLElement> = $('#debug_button > span');
if (debugbuttonIcon.length == 0) return;
debugbuttonIcon.addClass("bg-dark text-white");
}
90% of it works and my console output from debugarea.ts is
debugarea.ts:3 debugarea
debugarea.ts:4 ƒ ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery…
sporadically, just when reloading the browser-tab, I receive these errors here:
require.js:1961 GET http://localhost:58006/js/jquery.js 404 (Not Found)
require.js:168 Uncaught Error: Script error for "jquery", needed by: ../ts/debugarea
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:168)
at HTMLScriptElement.onScriptError (require.js:1738)
when reloading next time, it works again. Any idea what is going wrong here? Did I miss something?
I'm using jQuery 3.1.1 and RequireJS 2.3.5
edit: here two screenshot from debugger (network tab) - perhaps it helps.
- when it throws exceptions:
- when it works correctly:
from RequireJS sporadically throws exceptions when requiring jquery


No comments:
Post a Comment