Foundation-sites: Numerous JS issues in Google Dev Tools

[tsquez]

Hi all,

Decided to take v6.4.0 RC3 for a spin today in hopes of putting things in place to make the update to my WordPress theme WP-Forge easier.

Love the new XY grid by the way...great job guys!

All is going well however I did notice that in Google dev tools it's showing the following js issues:

TypeError: $ is not a function
    at rtl (foundation.js:92)
    at DropdownMenu._init (foundation.js:2992)
    at DropdownMenu._setup (foundation.js:2962)
    at DropdownMenu.Plugin (foundation.js:161)
    at new DropdownMenu (foundation.js:2944)
    at ResponsiveMenu._checkMediaQueries (foundation.js:8608)
    at ResponsiveMenu._init (foundation.js:8549)
    at ResponsiveMenu._setup (foundation.js:8514)
    at ResponsiveMenu.Plugin (foundation.js:161)
    at new ResponsiveMenu (foundation.js:8495)
(anonymous) @ foundation.js:5438)

I do not use sass or anything like that. Basically here is what I do when I use a RC: I download the source zip, unzip it, go into the dist folder and grab what I need. This time is no different. I put everything where it needs to go and never have issues. Works like a charm all the time.

I realize this is a RC but I have never had errors show up dev tools for other RC's I have used. Any ideas?

Any insight is greatly appreciated. Keep up the great work guys.

[brettsmason]

@tsquez Glad you like the new grid 👍
I think this will be a question for @kball - it will no doubt be to with the huge amount of work and changes that went into the JS for this release. I've switched to compiling it using Webpack with my WordPress theme so I haven't tried the raw dist files myself.

[tsquez]

I'm sure it will all be cleared up once 6.4 is officially released....I hope.....lol

[jashwant]

@brettsmason , can you share your webpack file, or guide me about using foundation webpack in wordpress ?

[JeremyEnglert]

The raw dist files do have issues with WordPress. @kball is aware and looking into them.

Although, I'd also be interested in seeing how @brettsmason addressed the issue with Webpack. :)

[kball]

@tsquez I've seen a few of these reports with wordpress so I think there's definitely something going on here, still trying to straighten it out... Thank you for the backtrace, it helped me trace down one possibility and I've found a potential fix here: https://github.com/zurb/foundation-sites/pull/10206

I'm going to try to turn around a new RC this afternoon/evening, would you be able to test that once it goes out?

[brettsmason]

@JeremyEnglert @jashwant sorry been away for a few days.
So this is my gulpfile and this is my theme JS file.

Hope that helps. Its based off the 6.4 Zurb stack.

[JeremyEnglert]

@brettsmason - super helpful! I'm going to give that a shot.

[JeremyEnglert]

@kball - i pulled down your fix and it appears to have corrected the problem. 👍

[kball]

OK, the fix in #10206 has been packaged up in RC 4 here: https://github.com/zurb/foundation-sites/releases/tag/v6.4.0-rc4

@tsquez can you verify if this resolves your issue as well to make sure it was the same as @JeremyEnglert's issue?

[tsquez]

Hey guys sorry, was away and just now got back. Yes I will test the above and let you know. Thanks for the effort.

[tsquez]

Yep all the issues are gone so far as I can tell....smooth sailing so far. Thanx guys. I appreciate all you do.

[kball]

👍

[jashwant]

@brettsmason , the 6.4 Zurb stack link was very helpful. Solved the problem. Thanks.

Any idea, how can I import masonry or other wordpress library through webpack ?

I am including wp version of masonry by wp_enqueue_script('masonry');

[brettsmason]

@jashwant I'm sorry I'm new to Webpack myself and haven't fully got my head around its use yet. I'm hoping the docs on this will be improved as I struggle with it too at the moment.

[jashwant]

Now, I understand that I would either need weback or browserify or something like that.
babel can only convert javascript, but does not do any require or import.

I have removed webpack and using browserify instead.

To use window.jQuery provided by wordpress core, and and avoiding latest jQuery from npm. I used browserify-shim.

package.json:

"browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "global:jQuery"
  },

gulpfile.babel.js

browserify({entries: 'main.js', extensions: ['js'], debug: true})
    .transform(babelify.configure({
      presets: ["es2015"]
    }))
    .transform('browserify-shim', {global: true})

[brettsmason]

@jashwant Thanks a lot for posting this, that's really helpful! 👍
I may look into using browserify myself rather than webpack, as it seems overly complicated for my requirements.