toastr is undefined when using toastr.js

Question

I'm trying to bring toastr into my application. I've done something very simple:

     bundles.Add(new ScriptBundle("~/Content/example-scripts").Include(
            "~/Areas/Examples/Scripts/vendor/*.js"
                   ));

Where that folder contains toastr.js. And then in my view:

   @Scripts.Render("~/Content/example-scripts")

I see toastr getting loaded in Chrome, yet when I call toastr from my viewmodel:

$(document).ready(function () {
    toastr.success('sup');
    ko.applyBindings(new ViewModel());
});

I get the following errors:

Uncaught Error: Mismatched anonymous define() module: function ($) {
        return (function () {
            var version = '2.0.1';
            var $container;
            var listener;
            var toastId = 0;
            var toastType = {
                error: 'error',
                info: 'info',
                success: '...<omitted>...ch require.js:166
Uncaught ReferenceError: toastr is not defined sampleVm.js:36

What am I doing wrong?

Answer 1

It seems you are using require.js because the error message is coming from it.

And the Mismatched anonymous define() module means that toaster.js was defined as an anonymous module but it was not loaded through require.js module loading mechanism.

So there is two solution for this in your case:

• If you are using require.js, use that to load toaster.js
• If it was not intended to use require.js, just remove the reference from your page and toaster.js will load just fine