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?

look at the source on the page and make sure that toastr is being included in the bundle, then make sure that the script where you are trying to reference it is after that call — Matt Bodily, Feb 28 '14 at 17:36
Thanks @MattBodily. I see toastr.js being loaded, and then after that, my vm that calls it. — SB2055, Feb 28 '14 at 17:40
It seems that you using require.js but you are not using it to load toaster.js which leads to this exception... see also: http://requirejs.org/docs/errors.html#mismatch — nemesv, Feb 28 '14 at 17:42
@nemesv - require.js is being used, but not in this part of the app... — SB2055, Feb 28 '14 at 17:45
Still it is also included this page otherwise you wouldn't receive this error... If it not needed this page just remove the require.js reference and toaster should work fine. — nemesv, Feb 28 '14 at 17:46
@nemesv spot on. Feel free to write up an answer or I can just delete this — SB2055, Feb 28 '14 at 17:51

score 4 · Accepted Answer · edited Jan 08 '15 at 16:12

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

toastr is undefined when using toastr.js

1 Answers1