Mismatch error with requireJS when using isotope JS library in Razor view

[Masahigo]

Hi,

We have encountered problems which are caused by this requireJS that ships with Sitefinity and is used in the front end for logged in users. Basically the page's javascript breaks down when we use our custom JS which depends on Isotope JS library.

We have followed the conventions described here
http://docs.sitefinity.com/feather-refer-to-resources-inside-views

Here's a snippet from our view

..
@Html.Script(Url.WidgetContent("assets/custom/libraries/isotope.pkgd.min.js"), "top")
@Html.Script(Url.WidgetContent("Mvc/Scripts/hash-filter.js"), "top")
..

hash-filter.js

var initListing = function (container, itemSelector, filterDropdown) {

var filters = $(filterDropdown).change(function () {
    var filterValue = $(this).val();
    location.hash = encodeURIComponent(filterValue);
});

var isIsotopeFilterInitialized = false;

function filterListing() {
    var hashFilter = getHashFilter();

    if (!hashFilter && isIsotopeFilterInitialized) {
        return;
    } else if (!hashFilter) {
        $(container).isotope({
            itemSelector: itemSelector,
            layoutMode: 'masonry'
        });
    } else {
        setIsotopeFilter();

        if (hashFilter) {
            $(filterDropdown).val(hashFilter);
        }
    }

    function setIsotopeFilter() {
        var isotopeFilter = function () {
            if (hashFilter === '*') {
                removeHash();
                return true;
            } else {
                return $(this).hasClass(hashFilter);
            }
        }

        $(container).isotope({
            itemSelector: itemSelector,
            layoutMode: 'masonry',
            filter: isotopeFilter
        });

        isIsotopeFilterInitialized = true;
    }
}

$(window).load(filterListing);
$(window).on('hashchange', filterListing);

}

function getHashFilter() {
var hashFilter = location.hash.substr(1);
return hashFilter && decodeURIComponent(hashFilter);
}

function removeHash() {
history.pushState('', document.title, window.location.pathname + window.location.search);

}

The error message is: "Uncaught Error: Mismatched anonymous define() module: function () { return t }
http://requirejs.org/docs/errors.html#mismatch"

This problem is not probably related to Feather only but Sitefinity front end in general. We have gotten the following instructions from Telerk support when previously asking about this (for a SF Web Forms project) but this is not only affecting Inline Editing but the Sitefinity frontend in general for logged in users:

"The require js is indeed used in the InlineEditing widget, whcih is shown when the currently logged in user can edit the page the controls on it. In order to resolve the script error, you should either disable the inline editing from Advanced settings -> Pages -> Enable inline editing , or register your script libraries using require js:
if (typeof require === 'undefined')
{ document.write(decodeURIComponent('%3Cscript id="yourscriptlib" src="/yourscriptlib.js" %3E%3C/script%3E')); }
else {
// Load using requirejs
requirejs.config({
"paths":
{ "yourscriptlib": "/yourscriptlib" }
,
"shim":
{ // whether needed }
});
"
require(["yourscriptlib"], function (srcf) {
});
}"