Foundation 5 possible Bug : Uncaught TypeError: Layer must be a document node foundation.min.js:8

7
votes

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?

2
javascriptzurb-foundation
Read the docs: foundation.zurb.com/docs/javascript.html it tells you to place jquery and foundation before the body tag. – David Nguyen
Before the closing body tag. But there are other options if you're forced to keep the JS in the head: see below. – fny

2 Answers

9
votes

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 />

2
votes

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.