Monday, 27 August 2018

RequireJS sporadically throws exceptions when requiring jquery

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.

  1. when it throws exceptions:

enter image description here

  1. when it works correctly:

enter image description here



from RequireJS sporadically throws exceptions when requiring jquery

No comments:

Post a Comment