Materialize CSS中M未定义报错求助：加载顺序正确仍无法识别M

一、先搞定「el is not defined」错误 #

这个问题很直白——你在调用M.Tabs.init(el, options)时，el变量根本没被定义过。想要初始化标签页，得先拿到对应的DOM元素才行：

// 先获取页面上的tabs元素
const el = document.querySelector('.tabs');
// 再执行初始化
const instance = M.Tabs.init(el, options);

如果你更习惯用jQuery，其实可以直接用封装好的方法，完全不用手动处理el，就像你写的那样：

$(document).ready(function(){
  $('.tabs').tabs();
});

这种方式会自动帮你完成元素获取和初始化，出错概率更低。

二、解决「M is not defined」错误 #

这个错误说明Materialize的全局M对象没被正确注册，大概率是资源加载环节出了问题，给你几个排查方向：

1. 严格确认资源加载顺序 #

Materialize依赖jQuery，所以加载顺序必须是：

• 先加载jquery.min.js
• 再加载materialize.min.js
• 最后加载你的自定义script.js

另外要注意：如果给JS文件加了async或defer属性，可能导致Materialize还没加载完成，你的脚本就先跑起来了。如果必须用异步加载，就把初始化代码放在页面完全加载后执行：

window.addEventListener('load', function() {
  // 在这里写初始化逻辑
  $('.tabs').tabs();
});

2. 检查版本兼容性与资源有效性 #

• 确认jQuery版本符合要求：Materialize 1.0.0及以上需要jQuery 2.1.1或更高版本，用太老的jQuery（比如1.x）会导致Materialize无法正常注册全局M对象。
• 打开浏览器开发者工具的「网络」标签，看看Materialize JS的链接有没有返回404——如果资源加载失败，自然找不到M对象。

3. Codepen环境的特殊处理 #

你提到在Codepen里出现报错，可能是脚本执行时机的问题。可以试试在Codepen的JS面板设置里，把「Load Type」改成「No wrap - bottom of 」，确保你的代码在所有外部资源加载完成后再执行。

三、完整的可运行示例 #

HTML结构： #

<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s3"><a href="#test1">Test 1</a></li>
      <li class="tab col s3"><a href="#test2">Test 2</a></li>
      <li class="tab col s3"><a href="#test3">Test 3</a></li>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1 Content</div>
  <div id="test2" class="col s12">Test 2 Content</div>
  <div id="test3" class="col s12">Test 3 Content</div>
</div>

资源加载与初始化（放在<body>标签末尾）： #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  // jQuery初始化方式
  $(document).ready(function(){
    $('.tabs').tabs();
  });

  // 原生JS初始化方式（可选）
  // document.addEventListener('DOMContentLoaded', function() {
  //   const el = document.querySelector('.tabs');
  //   const instance = M.Tabs.init(el);
  // });
</script>

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