Shimmed files not finding references to their dependencies

[baseten]

This may be related to #121 and potentially substack/node-browserify#1072 (although this appeared to be fixed in browserify v9)

I'm trying to get jQuery UI to attach itself to jQuery, it's expecting it to exist as jQuery not $ so I'm using the following setup. I've also aliased the files using the browser field of package.json. This is all being done in a separate library bundle to my application code, not sure if that makes a difference. The last time I had this working was using browserify v3.44.2, browserify-shim v3.4.1 and grunt-browserify v2.0.8. Currently trying browserify v9.0.3, browserify-shim v3.8.3 and grunt-browserify v3.5.1

package.json:

"browser": {
     "jquery": "./src/public_html/js/vendor/jquery/dist/jquery.js",
     "jquery-ui": "./src/public_html/js/vendor/jquery-ui/jquery-ui.js"
 }
 "browserify-shim": "./shims.js",

shims.js:

module.exports = {
    "jquery-ui": {
        "depends": {
            "jquery": "jQuery"
        }
    }
};

[bendrucker]

Can you please set up a repo that minimally reproduces this?

[baseten]

Here's a repo - https://github.com/baseten/browserify-shim-test on further testing it appears to be down to putting jquery and jquery ui into a separate bundle from the application code. If it's all bundled into one file it works as expected.

[baseten]

I wanted to make sure it wasn't anything to do with grunt-browserify, so I've added a gulp version too, but same issue is seen.

I've narrowed the versions down a bit more too. It may be down to something that's changed in browserify itself - if I use browserify-shim v3.8.2, I can't get this build to work with anything above browserify v4.2.3. This works with either grunt-browserify v2.1.4 or gulp and pure browserify

[bendrucker]

Please eliminate all non-essential build tools. There's no reason to use Grunt here over the browserify CLI. And you can just commit your dependencies instead of using bower.

[baseten]

Apologies, that's now done. You can run the browserify build now by running ./index.js from the command line - you'll need to open src/index.html via a local webserver to test the bundle works correctly.

[baseten]

I've managed to make the build work using the latest versions of browserify (v9.0.3) and browserify-shim (v3.8.3). It seems the problem is to do with using aliases in the browser field, it seems that browserify-shim isn't getting the full path from the browser alias - perhaps this is related to the browserify issue I referenced in the original post?

It will work if I use the following shim config, with full paths:

module.exports = {
    "./src/js/vendor/jquery-ui/jquery-ui.js": {
        "depends": {
            "./src/js/vendor/jquery/dist/jquery.js": "jQuery"
        }
    }
};

and then the long explicit form when using require for the library bundle:

b.require([
    {
        file: "./src/js/vendor/jquery/dist/jquery.js",
        expose: "jquery"
    },
    {
        file: "./src/js/vendor/jquery-ui/jquery-ui.js",
        expose: "jquery-ui"
    }
])

You can see this on the 'working' branch of the repo.

[bendrucker]

Same issue as #152. Since it's a problem w/ the b-shim not being called for those files at all there's no way to address it here — would have to be fixed upstream.