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');
    }
}

I don't know what the issue is but it might be worth switching to typings as tsd has been depricated github.com/DefinitelyTyped/tsd/issues/269 — Matt McCabe
looking at this it seems like I only should run "typings install" after npm install jquery-ui. But still same result :/ But i had both typings and tsd.. will remove tsd and see if this helps anything. — Evelie
Still same. Whats even more annoying is that i can clearly see that jquery-ui is installed in my node_modules folder. — Evelie
The { datepicker } part of the import statement is not really necessary, since jquery-ui does not export anything as far as I know. Have you tried to remove it? — Fabio Luz

Fabio Luz Fabio Luz · Accepted Answer · 2016-04-26T14:33:54

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!

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

1 Answers