在Django模板中使用js-snackbar报错：Snackbar is not defined

控制台提示“Snackbar is not defined”，本质是浏览器执行你的代码时，还没加载到js-snackbar组件的核心定义，你遗漏了以下关键配置：

• 未引入js-snackbar的核心资源文件
  你只写了调用Snackbar的代码，但没有先加载组件的CSS和JS文件。需要在模板中添加资源引入代码，比如：

  <!-- 引入组件样式 -->
  <link rel="stylesheet" href="path/to/snackbar.min.css">
  <!-- 引入组件脚本 -->
  <script src="path/to/snackbar.min.js"></script>
  

  注意替换path/to/为实际文件路径：如果是通过npm安装的，路径一般是node_modules/js-snackbar/dist/snackbar.min.css和node_modules/js-snackbar/dist/snackbar.min.js；如果是下载的本地文件，对应你存放的目录路径即可。

• 资源引入顺序错误
  必须保证js-snackbar的JS文件在你调用new Snackbar(...)的代码之前加载。如果你的消息脚本放在<head>里，而组件JS放在<body>末尾，就会出现执行时Snackbar未定义的情况。建议把组件JS和CSS放在<body>标签的最后，你的消息脚本紧跟在组件JS之后。

• 未检查资源是否加载成功
  打开浏览器开发者工具的「Network」标签，刷新页面，查看snackbar的JS和CSS文件是否返回200状态码。如果出现404错误，说明路径配置错误，需要修正路径。

另外，你可以优化模板代码，避免重复编写<script>标签，同时添加escapejs过滤器防止消息中的特殊字符导致JS语法错误：

{% if messages %}
<script>
{% for message in messages %}
    let status = '';
    {% if message.tags == 'success' %}
        status = 'success';
    {% elif message.tags == 'info' %}
        status = 'info';
    {% endif %}
    if (status) {
        new Snackbar({
            message: "{{ message|escapejs }}",
            status: status,
            position: "bl"
        });
    }
{% endfor %}
</script>
{% endif %}

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