Question by Brunch (brunch.io).

Description

I get the error:

TypeError: $ (...). Slider is not a function

Expected behavior

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

Environment

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

package.json

 { "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.js

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

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 App.js code:

 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);// Нет ошибок $( '#points-slider' ).slider({ // Ошибка: TypeError: $(...).slider is not a function range: true, min: 0, max: 500, values: [ 75, 300 ] }); this.showView(new ItemView()); }) } });

How to properly use jQueryUI in Brunch? I need a working jQueryUI + Brunch example.

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

Solution: jQuery plugins should be in the "/ vendor / scripts" folder. In this case, it works. I have not found another option yet.

Updated

Found such solutions:

  1. jQuery plugins put in the folder "/ vendor / scripts".

  2. Register npm.static in "brunch-config.js". Example of a working config:

 module.exports = { files: { javascripts: { joinTo: { 'vendor.js': /^(?!app)/, 'app.js': /^app/ }, order: { before: [ 'node_modules/jquery/dist/jquery.js', 'vendor/scripts/tether/tether.js', 'node_modules/leaflet/dist/leaflet-src.js' ] } }, stylesheets: { joinTo: 'app.css', order: { } }, templates: { joinTo: { 'app.js': /^app\/templates/ } } }, npm: { enabled: true, globals: { $: 'jquery', jQuery: 'jquery', L: 'leaflet' }, aliases: { 'jquery-ui': 'jquery-ui-dist' }, static: [//Тут перечислить все плагины для jQuery и Leaflet 'node_modules/bootstrap/dist/js/bootstrap.js', 'node_modules/jquery-ui-dist/jquery-ui.js', 'node_modules/leaflet-plugins/layer/tile/Yandex.js' ], styles: { bootstrap: ['dist/css/bootstrap.css'], 'jquery-ui-dist': ['jquery-ui.css'], leaflet: ['dist/leaflet.css'] } }, plugins: { babel: { presets: ['es2015'], compact: false }, sass: { mode: 'native' }, uglify: { mangle: false, compress: { global_defs: { DEBUG: false } } }, copyfilemon: { 'img': [ './app/img' ], 'images': [ './node_modules/leaflet/dist/images' ] } }, conventions: { assets: /assets[\\/]/, ignored: [ /[\\/]_/, /app\/styles\/icomoon\/demo-files/ ] }, paths: { 'public': 'bundle' } };