MaterializeCSS调用carousel报错：$(...).carousel is not a function

该报错的核心诱因是脚本加载顺序不符合依赖要求：
Materialize 1.x的所有JS组件都基于jQuery开发，必须在jQuery加载完成后才能正常初始化、把组件方法挂载到jQuery对象上。你的现有代码先引入了Materialize的JS文件，之后才加载jQuery，Materialize执行时找不到全局jQuery实例，自然不会注册carousel方法，后续调用时就会抛出「不是函数」的类型错误。
你之前排查的jQuery重复加载问题确实不存在，问题完全出在加载先后顺序上。

调整<head>内的资源引入顺序，严格遵守「依赖库在前，依赖该库的组件在后」的规则：先引入jQuery，再引入Materialize的JS文件。
修正后的头部引入代码如下：

<head>
    <!-- 引入谷歌图标字体 -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- 引入Materialize压缩版CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- 移动端视口适配配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- 先加载jQuery依赖 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 后加载Materialize压缩版JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

调整顺序后刷新页面，轮播组件即可正常初始化，报错会直接消失。

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