javascript - toastr is undefined when using toastr.js - Stack Overflow

admin管理员组

文章数量:1401509

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?

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?

• javascript
• asp-mvc-3
• asp-mvc-4
• razor
• toastr

Share Improve this question Follow asked Feb 28, 2014 at 17:34 SB2055SB2055 12.9k3737 gold badges105105 silver badges205205 bronze badges 6

• 1 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 Commented Feb 28, 2014 at 17:36
• Thanks @MattBodily. I see toastr.js being loaded, and then after that, my vm that calls it. – SB2055 Commented Feb 28, 2014 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: requirejs/docs/errors.html#mismatch – nemesv Commented Feb 28, 2014 at 17:42
• @nemesv - require.js is being used, but not in this part of the app... – SB2055 Commented Feb 28, 2014 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 Commented Feb 28, 2014 at 17:46

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

It seems you are using require.js because the error message is ing 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

本文标签： javascripttoastr is undefined when using toastrjsStack Overflow