11

I always get error "M is not defined" el is not defined

codepen sample

if you open console, you will see the error

I first load jquery.min.js then load materialize.min.js .css

then load my script.js below.

M is not recognized, which it should

why?

// init materialize tab
 var instance = M.Tabs.init(el, options);

  // Or with jQuery

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

 });

This is 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 class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
</div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
</div>
hoogw
  • 4,982
  • 1
  • 37
  • 33
  • This usually indicates not correctly "including" the library JS *prior* to the script. That is, there is no `M` variable in scope (eg "no module injection") and `window.M` (aka "a global") has not been set. – user2864740 Apr 04 '18 at 22:54

1 Answers1

16

I found the problem, it is version.

Make sure you use version => 1.0.0. 

 https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js

If you use version <1.0.0 very likely you have error as 'M is not defined'

Make sure you load jquery before materialize css !

Also you must first define elem and options to init tab

// init materialize tab
     var elem = $('.tabs')
     var options = {}
     var instance = M.Tabs.init(elem, options);

  //or Without Jquery


    //var elem = document.querySelector('.tabs');
     var options = {}
     var instance = M.Tabs.init(elem, options);
hoogw
  • 4,982
  • 1
  • 37
  • 33