.NET Core 3.1项目使用toastr库报错toastr is not defined如何解决

问题上下文 #

你提供的客户端库安装截图：

错误提示截图：

你遇到的Uncaught ReferenceError: toastr is not defined错误由以下几个原因导致，对应修复方式如下：

错误原因 #

• 脚本加载顺序错误：toastr依赖jQuery运行，必须先加载jQuery，再加载toastr脚本。你的引用代码中存在多处先加载toastr、后加载jQuery的情况，toastr初始化时找不到jQuery，就不会挂载全局toastr对象。
• 重复加载多版本资源：你同时引用了3个不同版本的jQuery和多份toastr资源，重复加载会覆盖已挂载的全局对象，也会引发冲突。
• 调用时机错误：如果调用toastr.success的代码在toastr资源加载完成前就执行，也会触发未定义错误。

修复步骤 #

1. 清理冗余引用，调整加载顺序
   删除所有重复的jQuery、toastr引用，仅保留1份jQuery和1份toastr，严格按照「toastr样式→jQuery→toastr脚本」的顺序加载，示例如下（优先使用你已安装的本地客户端库）：

<!-- toastr样式 -->
<link href="~/lib/toastr.js/toastr.css" rel="stylesheet" />
<!-- 先加载jQuery -->
<script src="~/lib/jquery/jquery.js"></script>
<!-- 再加载toastr脚本 -->
<script src="~/lib/toastr.js/toastr.min.js"></script>

如果你偏好使用CDN，就删除本地引用，仅保留一组CDN资源即可，不要混写本地和CDN的同类型资源。

2. 调整toastr调用时机
   将toastr调用代码放在toastr脚本引用的下方，或者包裹在DOM加载完成的回调中，确保执行时toastr对象已经初始化：

<script>
$(function() {
    toastr.success("s");
});
</script>

3. 排查资源加载状态
   如果按上述步骤操作后仍然报错，打开浏览器开发者工具的「网络」标签，刷新页面查看jQuery和toastr资源是否加载成功，排查是否存在本地路径错误、资源404的问题。

内容的提问来源于stack exchange，提问作者rahulchawla