cannot load module with webpack and bower

[imruiyeah]

I am using webpack and bower together, however, i got the below error:

10:20:37 webpack.1 | Module not found: Error: Cannot resolve module 'pickadate' in (my_app_path)

here is my bower.json

{
  "name": "my app",
  "version": "1.0.0",
  "description": "my app",
  "dependencies": {
    "pickadate": "~3.5.6"
  }
}

then i use require('pickadate') in my js

any ideas?

[carlos-lopez]

See #779

[pr1ntr]

Does not solve the issue for me. Using webpack 2. I can see that AMD is off, though $.pickadate is not a function.

[edit] nm

[brauliodiez]

This solution is for ng-pickadate (wrapper that uses pickadate), but I think it can apply to pickadate as well (specially the trick of the files and disable AMD for the pickadate path).

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:

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:

  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 !)

  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):

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)

                        <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 :-).

[bbutler101]

Hi, I am new pickadate module. I am just using this module in laravel application for custom datepicker but I am getting $(...).pickadate is not a function error now . So I think this is because I have not include the modules in right place. I am using webpack and laravel mix for Js compiling. But I am not sure how can I include this module in my project. Thank you for regarding my issue.

[DanielRuf]

Closing as this issue is very old and we did not receive further feedback.

You might want to try the externals option of webpack.