I'm trying for the first time the Zurb Foundation 5 framework and I got this error: "Uncaught TypeError: Layer must be a document node foundation.min.js:8"
This happened because I had this in the :
<script type="text/javascript" src="libs/foundation.min.js"></script>
When I moved it to the body, the error is gone.
Why? am I missing something about javascript or is it a bug?
This is a bug that was resolved in a recent commit that was merged into what will be v5.0.3. Just include that commit manually or wait until the v5.0.3 release and you should be good to go.
What's Going On
Foundation now initializes immediately from wherever you load the file instead of waiting for the DOM to load. For increased mobile performance, Foundation 5 embeds a library called FastClick
and tries to attach it to document.body
on initialization, so if you execute the JavaScript in the <head />
before the <body />
has rendered, FastClick throws that error.
If you're using Rails Turbolinks, Flask Turbolinks, or any similar library that replaces the <body />
dynamically, you'll need to keep your JS in the <head />
Most probably your html file was something like this:
<!doctype html>
<html>
<head>
<title>Title</title>
<script src="../js/jquery.js"></script>
<script src="../js/foundation.min.js"></script>
</head>
<body>
<script>
$(document).foundation();
</script>
</body>
</html>
And you got the error like:
Uncaught TypeError: Layer must be a document node
Uncaught TypeError: Object [object Object] has no method 'foundation'
You have to move <script>
line which includes foundation.js to body part, just before other script tag. As it is described in documentation. It is not a bug but it is a matter of script ordering/execution and dependencies. See load and execute order of scripts and other linked Q&A. And jquery.js has to be included before foundation.js library.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With