Importing JQuery UI from TypeScript

Question

I'm having a basic misunderstanding on how to use JQuery and JQuery.spinner with TypeScript.

I've moved the javascript entry point of an existing project from html tag to it's own TypeScript file "main.ts" and am using webpack to deal with module dependencies.

Within "main.ts", I use:

import $ = require("jquery");
import "jquery-ui";

And link "jquery" to a local .js library in the "webpack.config.js" as follows:

var path = require('path')

module.exports = {
  entry: './built/main.js',
  output: {
    path: path.resolve(__dirname, './'),
    filename: 'webpack-bundle.js'
  },
  module : {
    rules :
    [{
      oneOf:
      [{
          resourceQuery : 'jquery',
          use : './js/jquery-3.1.1.min.js'
      },
      {
          resourceQuery : 'jquery-ui',
          use : './js/jquery-ui.min.js'
      }
    ]
    }]
  },
}

This compiles correctly, but I have two problems:

1) At runtime the spinner arrows don't show up as they do in the original project (first one's mine, second one is the spinner in the original project):

2) My queries return a value that looks like "r.f.init(1)." In particular this line of javascript return "r.f.init(1)":

$('#backgroundColorR').spinner('value')

Where the html contains: <input type="text" id="backgroundColorR" value="0.0">

I'm not sure where the problem stems from, and other answers on here haven't helped out. I'm sure this is a basic question, but I'm at a loss here after much looking around here and at the JQuery UI API.

Answer 1

After many hours of trial and error, I came to a solution that works:

import * as $ from "jquery";
import "jquery-ui/ui/widgets/spinner";

Checking webpack with the --verbose option shows that it actually loads a chain of jquery-ui dependencies, whereas just having import "jquery-ui" would only show a few jquery dependencies.

It seems that each widget would have to be loaded manually in this way; thankfully I'm only using a spinner.