Cannot find module 'jquery-ui' when using Aurelia with Webpack

Question

Im trying to get a simple datepicker to work in aurelia but I think I have missed something really basic here.

Im using the aurelia skeleton with webpack here

https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-webpack

After this I assume its installing Jquery-ui that is next.

http://ilikekillnerds.com/2016/02/using-jquery-ui-widgets-in-aurelia/

Looking here it all seems simple. But no matter what I do I keep getting "[ts] Cannot find module 'jquery-ui'" on this row

import { datepicker } from "jquery-ui";

I cant figure out how to get the module working correctly.

npm install jquery
npm install jquery-ui 
tsd install jquery
tsd install jqueryui

Anything else missing here?

Since I use webpack I dont need any jspm magic? Or so I thought?

Edit: Adding a module dependency in Aurelia with Webpack

Here it looks like

npm install jquery-ui --save

is all I need. Still same problem

Edit: Complete datepicker.ts code

import { customElement, bindable, inject } from "aurelia-framework";

import "jquery";
import { datepicker } from "jquery-ui";

@customElement('jquery-ui-datepicker')
@inject(Element)
export class JqueryUiDatepicker {
    @bindable id = '';
    @bindable name = '';
    @bindable options = {};

    constructor(Element) {
        this.element = Element;

        if (!this.id && this.name) {
            this.id = this.name;
        }

        if (!this.name && this.id) {
            this.name = this.id;
        }
    }

    attached() {
        $(`#${this.id}`).datepicker(this.options)
            .on('change', e => {
                let changeEvent = new CustomEvent('input', {
                    detail: {
                        value: e.val
                    },
                    bubbles: true
                });

                this.element.dispatchEvent(changeEvent);
            });
    }

    detached() {
        $(`#${this.id}`).datepicker('destroy').off('change');
    }
}

Answer 1

Since jquery-ui does not export anything, you just have to import it, without loading any object or functions.

So, replace this:

import { datepicker } from "jquery-ui";

For this:

import "jquery-ui";
//if you want to load only the datepicker, use "jquery-ui/datepicker";

Now you would be able to use jquery-ui extension functions, like $.datepicker, $.accordion, etc.

However, there is another problem. Differently from SystemJS, webpack does not seem to load css files automatically, unless if it is explicitly loaded in the modules files.

For this reason, you have to load the css files as well. Like this:

import "../node_modules/jquery-ui/themes/base/jquery-ui.css"
//if you want to load only the datepicker, use "../node_modules/jquery-ui/themes/base/jquery.ui.datepicker.css"

In short, this is what you need:

import $ from "jquery";
import "jquery-ui";
import "../node_modules/jquery-ui/themes/base/jquery-ui.css";

Webpack will bundle all the referenced css into one file, it means that referencing "node_modules" folder inside your project is not a big a deal because you will not have to create this folder in the production environment.

If jquery-ui is used throughout the application, it is a good candidate to be loaded in the main.js or app.js file.

Hope this helps!