Foundation 6 JS broken when using yarn watch


#1

When I run yarn watch, any of foundation’s js components on my site don’t function properly (sticky, equalizer, etc.) however when I run yarn build everything works as expected. What could be wrong?


#2

Foundation puts a meta tag into head like: ”small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em";

It then reads those queries in util.mediaQuery.js and uses it to enable js breakpoints and other JS stuff.
The _init function of Foundation.MediaQuery does the following:
var extractedStyles = $(’.foundation-mq’).css(‘font-family’);

The meta tag is empty at the time util.mediaQuery.js initializes.

Related Discourse topic:

Related Git issue:


#4

I found that putting the $(document).foundation(); call inside of a timeout fixes some things. It’s kinda hacky though. I’m wondering if the new foundation 6.4 will work better. Haven’t had a chance to try it though.


#5

Hey folks. Does anyone else have a solution for this, even a temporary one?

Foundation 6.3 Responsive Navigation is not displaying correctly under Buble, possibly because Foundation 6.3 requires Babel.

We’ve tried switching Sage 9 to Babel and we’ve tried loading from a CDN and neither solution helped.