Webpack & Bower: Multiple css & js files

The pickadate module on npm has a broken package.json file: it doesn't specify a main entry, so webpack has no idea how to resolve require('pickadate'). You should probably file an issue upstream for them to fix this, but in the meanwhile you can fix it in your webpack.config.js.

So, you want to install both pickadate and jquery through npm, and then add the following to webpack.config.js:

{
    resolve: {
        alias: {
            'pickadate' : 'pickadate/lib/picker',
        },
    },
 }

This basically treats all instances of require('pickadate') into require('pickadate/lib/picker'). This reaches into the pickadate package and actually requires a real file. If upstream fixes their package.json to have a main entry, you can delete this alias from your config and all your requires will work properly.

More information about how the alias option works: http://webpack.github.io/docs/configuration.html#resolve-alias

The webpack.ResolverPlugin.DirectoryDescriptionFilePlugin doesn't handle bower.json description file when the 'main' field is an array, for example Bootstrap:

"main": [
"less/bootstrap.less",
"dist/js/bootstrap.js"
]

In that case, you should install the package using npm, and require() css files explicitly

I faced the same issue using a pickadate wrapper (ng-pickadate), hopefully most of the quirks will apply:

• Referencing the js files, pickadate package json entry point seems not to be ok.
• Disabling AMD for the pickadate node modules path.
• Add providepluing ($, Jquery, window.jquery).

Bellow the step by step guide (remove the angular part, if you just want to configure pickadate).

Following the steps mentioned in this thread, I manage to make it work without having to tweak the code under node_modules. Just a quick recap (angular 1, webpack 2 solution):

First install ng-pickadate

npm install ng-pickadate

It will download as well jquery and pickadate dependencies.

Then we need to add the depencies in our webpack.config, here there's a catch pickadate.js package json main seems not to be pointing to the right entry point, we have to manually indicate which files we want to include:

diff module.exports = { context: path.join(basePath, 'src'), resolve: { extensions: ['.js', '.ts'] }, entry: { app: './app/app.ts', vendor: [ + 'jquery', + 'angular',
+ 'pickadate/lib/picker', + 'pickadate/lib/picker.date',
+ 'ng-pickadate', ],

Now comes fun part, pickadate will try to load AMD modules, in my case we need commonjs, we don't want to change the code on the library, rather disable this using a rule (loader), just only for the pickadate folder:

diff module: { rules: [ + { + test: /pickadate/, + parser: { amd: false } + },
{ test: /\.ts$/,

Now let's review our provide plugin and ensure we have all this ways of global referencing jquery (window.jquery quite important !)

diff plugins: [ + new webpack.ProvidePlugin({ + "$": "jquery", + "jQuery": "jquery", + "window.jQuery": "jquery",
}), It's time to start using this in our app, let's include it in the angular module where we are using it (we are using angular 1.6):

```diff import * as angular from 'angular'; import { LoginComponent } from './login.component';

export const LoginModule = angular.module('loginModule', + ['pickadate']) .component('login', LoginComponent) ; ```

And let's use the directive in the HTML (input)

diff <div class="form-group"> <label for="txtEmail">Birthdate</label> <input type="text" + pick-a-date="vm.curDate"/> </div>

All this steps are just a recap of feedback got from several issues that were open, thanks to all the chaps that were providing the right tips :-). The parts that are new are marked with "+" (it seems stackoverflow doesn't support diff).