Using bower dependencies that rely on jQuery

sage
1

I’m trying to setup a new theme using Foundation 6. Some Foundation JS components require the MotionUI Library.

MotionUI relies on jQuery and it is throwing an error because the UglifyJS task is renaming “jQuery” to “Symbol” because it doesn’t know that I already have jQuery included using the Soil plugin!

So I can import the files just the way I want, like so:

bower.json

...
  "dependencies": {
    "foundation-sites": "^6.2.0",
    "motion-ui": "^1.2.2"
  },
  "overrides": {
    "foundation-sites": {
      "main": [
        "./scss/foundation.scss",
        "./js/foundation.core.js",
        "./js/foundation.util.box.js",
        "./js/foundation.util.keyboard.js",
        "./js/foundation.util.mediaQuery.js",
        "./js/foundation.util.motion.js",
        "./js/foundation.util.nest.js",
        "./js/foundation.util.timerAndImageLoader.js",
        "./js/foundation.util.touch.js",
        "./js/foundation.util.triggers.js",
        "./js/foundation.abide.js",
        "./js/foundation.drilldown.js",
        "./js/foundation.dropdown.js",
        "./js/foundation.dropdownMenu.js",
        "./js/foundation.equalizer.js",
        "./js/foundation.interchange.js",
        "./js/foundation.magellan.js",
        "./js/foundation.offcanvas.js",
        "./js/foundation.orbit.js",
        "./js/foundation.responsiveMenu.js",
        "./js/foundation.responsiveToggle.js",
        "./js/foundation.reveal.js",
        "./js/foundation.sticky.js",
        "./js/foundation.tabs.js",
        "./js/foundation.toggler.js"
      ]
    },
    "motion-ui": {
      "main": [
        "./src/motion-ui.scss",
        "./dist/motion-ui.js"
      ]
    }
  }
...

manifest.json:

...
"dependencies": {
  "main.js": {
    "files": [
      "scripts/main.js"
    ],
    "bower": [
      "foundation-sites",
      "motion-ui"
    ],
    "main": true
  },
  "main.css": {
    "files": [
      "styles/main.scss"
    ],
    "main": true
  },
  "customizer.js": {
    "files": [
      "scripts/customizer.js"
    ]
  },
  "jquery.js": {
    "bower": ["jquery"]
  }
...

What can I do to include the MotionUI library and still work with jQuery?

2

If you want to work with Foundation 6 and Wordpress themes the best two examples I have found are.


I know to use the newer Foundation versions and MotionUI you need to be using the 2.x versions of jQuery, not sure the exact version you want to be using though.

3

Thanks @RiFi2k. I don’t know if jQuery 2.x is required yet because I actually fixed my issue with 1.11.3, so this can be closed. Turns out I was just pulling in the wrong files.

bower.json

"motion-ui": {
  "main": [
    "./motion-ui.scss",
    "./motion-ui.js"
  ]
}