m is not defined materialize css - materialize

Question

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">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3 disabled">Disabled Tab</li>
<li class="tab col s3">Test 4</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>

Answer 1

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);