NPM packages with subfolders don't work?

[wassafr]

Trying to include an NPM package with a vendor subfolder, (zipjs-browserify), generates the following error when loading the page in the browser :

Error: Cannot find module 'zipjs-browserify/vendor/zip' from 'zipjs-browserify/index.js'

I've create a separate projet without brunch and included zips-browserify manually, it works straight out so I don't think the issue is with zipjs-browserify.

When looking at the compiled file, I can see code from zipjs-browserify/index.js but no code from the files that are in zipjs-browserify/vendor.

If I add node_modules/zipjs-browserify/vendor to the watched list, the error disappear but I get a new one : ReferenceError: Can't find variable: __dirname (__dirname is used by zipjs-browserify). I think this one is out of scope.

One more thing that may be important : zipjs-browserify is not called directly from my code but from another library (ip-extract-info).

So, do I need to manually add every subfolder of each NPM modules ?

Environment

1. Brunch: clone from master (@89f71d1)
2. Node: 7.3.0
3. NPM: 3.10.10
4. Operating system: Mac 10.12.1

package.json contents

{
  "dependencies": {
    "clean-css-brunch": "^2.0.0",
    "ipa-extract-info": "^1.2.2",
    "javascript-brunch": "^2.0.0",
    "sass-brunch": "^2.9.0",
    "util": "^0.10.3",
    "zipjs-browserify": "^1.0.1"
  },
  "devDependencies": {
    "admin-on-rest": "^0.6.1"
  }
}

brunch config contents

exports.config = {
  paths: {
    'public': 'web',
    'watched': ['app/Resources/front']
  },
  files: {
    javascripts: {
      joinTo: {
        'js/app.js': /^app/,
        'js/vendor.js': /^(?!app)/
      }
    },
    stylesheets: {
      joinTo: {
        'css/vendor.css': /^(?!app)|app\/Resources\/front\/scss\/base/,
        'css/admin.css': /^app\/Resources\/front\/scss\/admin/,
        'css/download.css': /^app\/Resources\/front\/scss\/download/
      }
    }
  },
  conventions: {
    ignored: [
      /\/_/ // File beginning by "_" like _settings.scss
    ],
    assets: /^app\/Resources\/front\/assets/
  },
  plugins: {
    sass: {
      allowCache: true
    },
    cleancss: {
      keepSpecialComments: 0,
      removeEmpty: true
    }
  }
};

[beznosd]

Hi @wassafr! Can you create a repo with the bug, to let me reproduce it locally?

[IvanSanchez]

I tried to reproduce this at https://github.com/IvanSanchez/brunch-bug-1618 , with

var center = require('@turf/center');

but Brunch works as expected.

[jeffreymara]

Interesting. I am experiencing the same issue as wassafr

[prayash]

Still experiencing this problem. Does anyone have any workarounds?

[natewallis]

same here... i am trying to use the braintree web drop in

npm install --save braintree-web-drop-in

And it complains about some @braintree scoped packages not being available..

I am running brunch 2.10.17 - which I believe should allow these packages

[crookedneighbor]

@nwallis Braintree engineer here, the issue is that brunch is using the browserified version of Drop-in found in the browser attribute of its package.json, but because of that, it's confusing the local requires with global node requires. Importing it this way should solve your problem:

var dropin = require('braintree-web-drop-in/index.js');

It forces brunch to use the uncompiled version instead of defaulting to the browser ready version.

For the Brunch devs, is there a way for Brunch to not care about the requires in an already browserified file?

[crookedneighbor]

Drop-in issue for reference: braintree/braintree-web-drop-in#432