Foundation 6 JS broken when using yarn watch

sage
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:
https://github.com/roots/sage/issues/1865

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.

6

I’m also experiencing this problem. Any solutions?

1 Like
7

Well - I’m not sure it’s much of a solution, but after struggling with this issue for the better part of a day I tried switching to a different browser. Although I didn’t have any luck with Yarn Start using either Chrome or Firefox, Safari seems to be running the js as expected.

8

Foundation 6 isn’t supported by Buble. It’s only supported by Babel. We switched out Buble and replaced it with Babel. Problem solved.

I don’t recall exactly how we did that, though. Our git commit looks like this:

In /resources/assets/build/webpack.config.js:

      {
        test: /\.js$/,
        exclude: [/node_modules(?![/|\\](bootstrap|foundation-sites|fitty))/],
        use: {
          loader: 'cache',
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },

In a new file /.babelrc

{
  "presets": [
    ["env",{modules: false}]
  ]
}

In /package.json:

  "devDependencies": {
    "autoprefixer": "~7.1",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    ...

IMHO Sage 9 shouldn’t ship with a Foundation 6/Buble combination because it’s broken out of the box.