jQuery UI - TypeError: $(...).slider is not a function

Description

Error:

TypeError: $(…).slider is not a function

Expected behavior

$ and $('.my-element').slide() - should work. Now works only $

Environment

1. Brunch: 2.8.2
2. Node: v6.6.0
3. NPM: 3.10.3
4. Operating system: Linux Ubuntu

package.json contents

{
  "name": "gps-app",
  "description": "Description",
  "author": "",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "start": "brunch watch --server",
    "build": "eslint app && brunch build --production",
    "test": "echo test"
  },
  "dependencies": {
    "backbone": "~1.3.3",
    "backbone.marionette": "~3.0.0",
    "bootstrap": "^4.0.0-alpha.4",
    "jquery": "~1.12.2",
    "jquery-ui-dist": "^1.12.1",
    "leaflet": "^1.0.1",
    "leaflet-plugins": "^2.0.0",
    "tether": "^1.3.7",
    "underscore": "^1.8.0"
  },
  "devDependencies": {
    "auto-reload-brunch": "^2.0.0",
    "babel-brunch": "^6.0.6",
    "babel-preset-es2015": "~6.3.13",
    "brunch": "^2.8.2",
    "clean-css-brunch": "^2.0.0",
    "copyfilemon-brunch": "^3.3.0",
    "css-brunch": "^2.0.0",
    "eslint": "^2.11.1",
    "javascript-brunch": "latest",
    "sass-brunch": "^2.6.3",
    "uglify-js-brunch": "^2.0.0",
    "underscore-brunch": "~1.4.0"
  },
  "overrides": {
    "jquery-ui-dist": {
      "main": "jquery-ui.js"
    }
  }
}

brunch config contents

module.exports = {
    files: {
        javascripts: {
            joinTo: {
                'vendor.js': /^(?!app)/,
                'app.js': /^app/
            },
            order: {
                before: [
                    'node_modules/jquery/dist/jquery.js'
                ]
            }
        },
        stylesheets: {
            joinTo: 'app.css'
        },
        templates: {
            joinTo: {
                'app.js': /^app\/templates/
            }
        }
    },
    npm: {
        enabled: true,
        globals: {
            $: 'jquery'
        },
        styles: {
            bootstrap: ['dist/css/bootstrap.css'],
            'jquery-ui-dist': ['jquery-ui.css']
        }
    },
    plugins: {
        babel: {
            presets: ['es2015'],
            compact: false
        },
        sass: {
            mode: 'native'
        },
        copyfilemon: {
            'img': [
                './app/img'
            ]
        }
    },
    conventions: {
        assets: /assets[\\/]/
    },
    paths: {
        'public': 'bundle'
    }
};

Other useful files, when present (log, bower.json etc.)

bower.json

{
  "name": "my-app",
  "version": "0.0.1",
  "authors": [
  ],
  "main": "index.html",
  "license": "Commercial",
  "homepage": "",
  "dependencies": {
    "leaflet-plugins": "leaflet_one",
    "leaflet-polylinedecorator": "1.1.0",
    "leaflet.markercluster": "master"
  },
  "keywords": [
  ]
}

My code App.js:

import Marionette from 'backbone.marionette';
import ItemView from './ItemView';

export default Marionette.Application.extend({
    region: '#app',

    initialize() {
        this.on('start', () => {

            console.log('START', $( '#points-slider' ).length);// No errors

            $( '#points-slider' ).slider({ // Error: TypeError: $(...).slider is not a function
                range: true,
                min: 0,
                max: 500,
                values: [ 75, 300 ]
            });

            this.showView(new ItemView());
        })
    }
});

[kgcreative]

You want to place the plugin into vendor/scripts

[clarknelson]

The best way to add jquery ui components is to use this require statement where you want to use datepicker: require('jquery-ui/ui/widgets/datepicker');