These are chat archives for brunch/brunch

17th
May 2016
Michal Valasek
@michalvalasek
May 17 2016 12:34
Hello guys! Does anyone have 5 minutes for some basic questions about importing npm managed jquery plugins with Brunch?
Michal Valasek
@michalvalasek
May 17 2016 12:42
I have a project where I manage my frontend dependencies via NPM and build it with Brunch.
I need to use a jquery plugin (flipclock) in my main JS file. I have installed the plugin via NPM, I have whitelisted the plugin in my brunch config (config.npm.whitelist) and finally I imported the plugin in my main JS file. But it seems like it didn't get picked up and bundled by Brunch during the build process. When I looked at the beginning of the sourcemap file (.js.map) the plugin wasn't listed there. What am I doing wrong?
Colin Bate
@colinbate
May 17 2016 12:48
Hey @michalvalasek, first I would ask which version of Brunch you are using because you shouldn't need to whitelist your packages anymore.
Michal Valasek
@michalvalasek
May 17 2016 12:49
Hello @colinbate, it’s 2.1.3
Colin Bate
@colinbate
May 17 2016 12:50
You may want to update that. 2.7.7 is the latest. Even though you don't use a direct reference to the plugin, you'll still need to require it at some point. So perhaps wherever you require/import jQuery, you will need to do the same with any plugins.
So something like:
let $ = require('jquery');
require('jquery-flipclock');
require('jquery-whatever');

// Other code...
Michal Valasek
@michalvalasek
May 17 2016 12:52
I’m importing the jQuery into the globals right in the brunch config and I’m importing the plugin in the JS file like this: `import “flipclock” (I’m using babel-brunch)
npm: {
    enabled: true,
    // Whitelist the npm deps to be pulled in as front-end assets.
    // All other deps in package.json will be excluded from the bundle.
    whitelist: ["phoenix", "phoenix_html", "jquery", "bootstrap-sass", "flipclock"],
    globals: { // bootstrap-sass' JavaScript requires both '$' and 'jQuery' in global scope
      $: 'jquery',
      jQuery: 'jquery'
    }
  }
Colin Bate
@colinbate
May 17 2016 12:56
Well, a lot of NPM improvements have gone in since 2.1.3, so it might just be that you need to find a newer version.
Michal Valasek
@michalvalasek
May 17 2016 12:57
Oh, so you’re saying the NPM support was broken in 2.1.3?
Colin Bate
@colinbate
May 17 2016 12:58
Not necessarily. The other thing is do you have your joinTo set up to capture files in node_modules?
Michal Valasek
@michalvalasek
May 17 2016 12:59
Yes, like this:
"js/vendor.js": /^(node_modules)/
Colin Bate
@colinbate
May 17 2016 13:00
And you are getting other node modules into vendor, just not that plugin?
Michal Valasek
@michalvalasek
May 17 2016 13:01
yes, I’m loading this way jquery and bootstrap.js and they both get into the vendor.js
Colin Bate
@colinbate
May 17 2016 13:05
Well, you can check that Babel is converting your import "flipclock" into the correct require statement, but I suspect it is. Honestly I would try a newer version, even 2.2.3 (if you don't want to go all the way to latest) and at least see if that works.
Michal Valasek
@michalvalasek
May 17 2016 13:06
OK, will do. Thanks!
I updated brunch to 2.2.3 and now I’m getting this error during build:
17 May 15:07:34 - error: Resolving deps of web/static/js/front.js failed. Could not load module 'flipclock' from '/Users/michal/Code/elixir/phoenix/count_ego/web/static/js'. Possible solution: run `npm install`.
Colin Bate
@colinbate
May 17 2016 13:09
ok, that was probably what was happening before, but silently :)
Michal Valasek
@michalvalasek
May 17 2016 13:09
(front.js is the file where I’m importing the flipclock plugin - it can’t import the plugin because it’s not in the vendor.js bundle)
Yea, looks like that :)
let’s go full in and update the brunch to the latest
Colin Bate
@colinbate
May 17 2016 13:12
Are you sure that flipclock is in the place where it is supposed to be?
Michal Valasek
@michalvalasek
May 17 2016 13:12
it’s in the node_modules folder
node_modules/flipclock/compiled/flipclock.js
Colin Bate
@colinbate
May 17 2016 13:14
ah, it may not be able to find that file in the package
does flipclock have a main property in the package.json which points to that?
Michal Valasek
@michalvalasek
May 17 2016 13:15
let me check
Colin Bate
@colinbate
May 17 2016 13:15
if not, you may have to import "flipclock/compiled/flipclock"
Michal Valasek
@michalvalasek
May 17 2016 13:15
no :(
Colin Bate
@colinbate
May 17 2016 13:15
ok that is the problem then
brunch can't tell which js file to import
Michal Valasek
@michalvalasek
May 17 2016 13:16
it works!
now I feel like a complete idiot :)
thanks a lot!
Colin Bate
@colinbate
May 17 2016 13:16
no problem... these things happen
Michal Valasek
@michalvalasek
May 17 2016 13:16
i mean - thanks for your help, not for the idiot feeling, that’s pure my work :)
Colin Bate
@colinbate
May 17 2016 13:17
if you stay with the newer version of Brunch (recommended) then you don't need the whitelist, or explicitly enabling npm support.
Michal Valasek
@michalvalasek
May 17 2016 13:18
just the globals, right?
Colin Bate
@colinbate
May 17 2016 13:18
yea
Michal Valasek
@michalvalasek
May 17 2016 13:18
perfect! again - thank you!