Trouble including slick-carousel with global jQuery using Browserify / Browserify Shim

Question

I'm using Browserify 11.2 and Browserify Shim 3.8 and am attempting to utilize slick-carousel (included via npm) with a jQuery loaded from a CDN. I realize that this requires the use of Browserify shim, but I am unable to get it to work.

Here is the relevant portion of my package.json file.

  "devDependencies": {
      ...
      "browserify": "^11.2.0",
      "browserify-shim": "^3.8.10",
      ...
      "slick-carousel": "^1.5.8",
      ...
    },
    "browserify": {
      "transform": [
        "browserify-shim"
      ]
    },
    "browser": {
    },
    "browserify-shim": {
      "jquery": "global:jQuery",
      "slick-carousel": {
      }
    },
    "dependencies": {
    }

When attempting to require slick-carousel, I get the error:

Cannot find module 'jquery' from 'path_to_node_modules/node_modules/slick-carousel/slick'

However, if I output require('jquery') to a constant (e.g.)

const jq = require('jquery'), jquery is there as I would expect.

Right now my script just contains the following for testing:

require('jquery');
require('slick-carousel');

I've always had a tough time wrapping my head around Browserify Shim - any guidance on what I'm doing wrong is appreciated.

Answer 1

You need to specify that slick-carousel depends on jQuery in your package.json:

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