I'm trying to get select2 working in my app, but couldn't able to. I've added it by yarn add select2. Below is my code
javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
require("bootstrap")
require("tempusdominus-bootstrap-4")
require("moment/locale/ja")
require('select2')
// stylesheets
require("../stylesheets/application.scss")
import "#fortawesome/fontawesome-free/css/all.css";
import "./owl.carousel.min.js";
import 'select2';
import 'select2/dist/css/select2.css';
$(document).ready(function(){
$('.customers-dropdown').select2();
$("select").change(function(event) {
$("#extra_price").html(formatCurrency($("#extra_" + $(".select").val()).html()));
computetotal(event);
});
$('#inlineDatepicker').datetimepicker({
inline: true,
sideBySide: false,
format: 'L',
useCurrent: false,
defaultDate: $('#weekStardate').val(),
});
$("#inlineDatepicker").on("change.datetimepicker", ({date, oldDate}) => {
var fdate = moment(date)
$('#weekStardate').val(fdate.format("D/M/YYYY"))
})
});
package.json
{
"name": "rails_6_devise_example",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-free": "^5.14.0",
"#rails/actioncable": "^6.0.0-alpha",
"#rails/activestorage": "^6.0.0-alpha",
"#rails/ujs": "^6.0.0-alpha",
"#rails/webpacker": "^5.2.1",
"bootstrap": "^4.5.2",
"bootstrap-datepicker": "^1.9.0",
"jquery": "^3.5.1",
"moment": "^2.27.0",
"node-sass": "^4.12",
"popper.js": "^1.16.1",
"rails-ujs": "^5.2.4-3",
"select2": "^4.1.0-rc.0",
"tempusdominus-bootstrap-4": "^5.1.2",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.8.1"
}
}
I get Uncaught TypeError: $(...).select2 is not a function. I've looked into many posts and as suggested, I tried to add import $ from 'jquery'; above import 'select2'; which works but that breaks datetimepicker resulting in Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_2___default(...)(...).datetimepicker is not a function I don't have a clue what is happening.
Any help is much appreciated, thanks!
I prepared the code quickly and it works fine. I just added this to the plugins:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
moment: 'moment'
})
I also changed the order, because that is what the turbolink wanted ;)
require("jquery")
require("bootstrap")
require("tempusdominus-bootstrap-4")
require("moment/locale/ja")
require("turbolinks").start()
require('select2')
Of course there are some bugs but I miss formatCurrency but the most important things work :)
In assets/js/bootstrap.js I have:
window._ = require('lodash');
window.Popper = require('popper.js/dist/umd/popper');
try {
window.$ = window.jQuery = require('jquery/dist/jquery.slim');
require('bootstrap');
} catch (e) {}
My package.json
"devDependencies": {
"axios": "^0.17",
"bootstrap": "^4.1.1",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"popper.js": "^1.12.6",
"vue": "^2.5.7"
}
So I guess for ajax you need jquery not jquery slim.
So how do I get only jquery and make laravel 5.6 use jquery instead of the slim version.
Simply include jQuery instead of jQuery slim:
window.$ = window.jQuery = require('jquery');
I follow some tutorial to build some react app.
and I found the js file include some module like below.
var $ = require('jquery');
var React = require('React');
var ReactDOM = require('react-dom');
var url = require('url');
var moment = require('moment');
var NewsItem = React.createClass({
.........code.......
I thought only in node.js app can require module like that.
or all js app can do like this?
Can any one explain to me?
Below is my package.son file..
{
"name": "hn",
"version": "0.1.0",
"private": true,
"browserify": {
"transform": [
[
"reactify"
]
]
},
"dependencies": {
"jquery": "^2.1.4",
"lodash": "^3.10.1",
"moment": "^2.10.6",
"react": "^0.14.0",
"react-dom": "^0.14.0"
},
"devDependencies": {
"browserify": "^11.2.0",
"reactify": "^1.1.1",
"watchify": "^3.4.0"
}
}
React.js relies on node and npm as prerequisites, and Browserify allows you to require modules on the client side (in your browser).
Soooooo.... I'm have a helluva time trying to figure out browserify.
Here's my app.js file:
var $ = require('../lib/jquery');
var foundation = require('../lib/foundation/foundation');
$(document).ready(function($){
$(document).foundation();
});
when i try loading the browserified file, I get this error:
Uncaught ReferenceError: jQuery is not defined
I'm using the latest version of jquery. Any idea what's going on?
so uh, i solved the problem by using browserify-shim
here's what i added to my package.json file:
"browser": {
"jquery": "./js/lib/jquery.js"
},
"browserify-shim": {
"jquery": "$"
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"browserify-shim": "~3.2.0"
}
ta da
There are many similar questions including answers here on stack overflow, but none of them have worked for me, so here I am asking you guys. I appreciate everyone's time.
I recently started using gulp with browserify, and that works great.
I then tried to use browserify for the front-end using: Backbone and Bootstrap3.
things are appearing to work, until I try to require the js file that comes with Bootstrap. I get an error in my chrome tools stating: jQuery is undefined.
I have attempted to shim it in, but I am very confused by the shim. I am using jQuery 2.1.1, so I should not need to shim jQuery, but it exists in the shim now, as I was desperate and trying everything. Here is my package.json and my main.js file:
--------------package.json------------------
{
"name": "gulp-backbone",
"version": "0.0.0",
"description": "Gulp Backbone Bootstrap",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Rob Luton",
"license": "ISC",
"devDependencies": {
"jquery": "^2.1.1",
"backbone": "^1.1.2",
"browserify": "^4.2.1",
"gulp": "^3.8.6",
"vinyl-source-stream": "^0.1.1",
"gulp-sass": "^0.7.2",
"gulp-connect": "^2.0.6",
"bootstrap-sass": "^3.2.0",
"browserify-shim": "^3.6.0"
},
"browser": {
"bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
"jQuery": "./node_modules/jquery/dist/jquery.min.js"
},
"browserify": {
"transform": ["browserify-shim"]
},
"browserify-shim": {
"jquery": "global:jQuery",
"bootstrap": {
"depends": [
"jQuery"
]
}
}
}
------------------------- main.js ----------------------
var shim = require('browserify-shim');
$ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
var bootstrap = require('bootstrap');
/* the following logs fine if I comment out the bootstrap require, otherwise I get 'jQuery undefined' */
console.log(Backbone);
$(function() {
alert('jquery works');
});
You shouldn't need to shim jquery that way if you've installed it with npm. The following works for a project I've been writing:
I've also learned that using npm for bootstrap is kind of a PITA. I've been using bower to install and maintain certain front-end components when they need to be shimmed like this.
package.json:
{
"name": "...",
"version": "0.0.1",
"description": "...",
"repository": {
"type": "git",
"url": "..."
},
"browser": {
"d3js": "./bower_components/d3/d3.min.js",
"select2": "./bower_components/select2/select2.min.js",
"nvd3js": "./bower_components/nvd3/nv.d3.min.js",
"bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js"
},
"browserify": {
"transform": [
"browserify-shim",
"hbsfy"
]
},
"browserify-shim": {
"d3js": {
"exports": "d3",
"depends": [
"jquery:$"
]
},
"bootstrap": {
"depends": [
"jquery:jQuery"
]
},
"select2": {
"exports": null,
"depends": [
"jquery:$"
]
},
"nvd3js": {
"exports": "nv",
"depends": [
"jquery:$",
"d3js:d3"
]
}
},
"devDependencies": {
"browserify-shim": "~3.4.1",
"browserify": "~3.36.0",
"coffeeify": "~0.6.0",
"connect": "~2.14.3",
"gulp-changed": "~0.3.0",
"gulp-imagemin": "~0.1.5",
"gulp-notify": "~1.2.4",
"gulp-open": "~0.2.8",
"gulp": "~3.6.0",
"hbsfy": "~1.3.2",
"vinyl-source-stream": "~0.1.1",
"gulp-less": "~1.2.3",
"bower": "~1.3.3",
"cssify": "~0.5.1",
"gulp-awspublish": "0.0.16",
"gulp-util": "~2.2.14",
"gulp-rename": "~1.2.0",
"gulp-s3": "git+ssh://git#github.com/nkostelnik/gulp-s3.git",
"gulp-clean": "~0.2.4",
"process": "~0.7.0"
},
"dependencies": {
"backbone": "~1.1.2",
"jquery": "~2.1.0",
"lodash": "~2.4.1",
"d3": "~3.4.8",
"rickshaw": "~1.4.6",
"datejs": "~1.0.0-beta",
"moment": "~2.7.0"
}
}
js:
$ = jQuery = require('jquery');
var _ = require('lodash');
var Rickshaw = require('rickshaw');
var d3 = require('d3js');
var nvd3 = require('nvd3js');
var moment = require('moment');
require('datejs');
require('select2');
var bootstrap = require('bootstrap');
console.log(bootstrap)
Also - one sometimes useful thing is to have browserify-shim output its diagnostics. This is what my browserify.js task looks like:
var browserify = require('browserify');
var gulp = require('gulp');
var handleErrors = require('../util/handleErrors');
var source = require('vinyl-source-stream');
var process = require('process');
process.env.BROWSERIFYSHIM_DIAGNOSTICS=1;
var hbsfy = require('hbsfy').configure({
extensions: ['html']
});
gulp.task('browserify', ['images', 'less'], function(){
return browserify({
transform: ['hbsfy', 'cssify'],
entries: ['./src/javascript/app.js'],
})
.bundle({debug: true})
.on('error', handleErrors)
.pipe(source('app.js'))
.pipe(gulp.dest('./build/'));
});
There is error as I am using browserify which require the variable '$' or 'jQuery' to be defined.
adding the window to make it global resolve the error. Not sure if this would be the correct way to do, if not, let me know.
window.$ = window.jQuery = require('jquery');
var bootstrapjs = require('bootstrap-sass');
I've been wondering about this for a while. This simple solution does the job for me:
import foo from 'foo';
import bar from './bar';
import { default as $ } from "jquery";
global.$ = $;
global.jQuery = $; // This one does the trick for bootstrap!
// Boostrap's jQuery dependency only works with require, not with ES6 import!
const btp = require('bootstrap');
So to make Bootstrap to work with Browserify you're going to need one of Browserify CSS transforms.
First the index.js (browserify entry)
// Bootstrap needs jQuery on the Window
window.jQuery = $ = require('jquery');
// include popper.js if you want Bootstrap tooltips
window.Popper = require('popper.js');
// include bootstrap js libs (not the CSS libs as yet)
require('bootstrap');
// then the CSS Lib
require('bootstrap/dist/css/bootstrap.css');
NPM Installs:
npm install bootstrap#4.0.0-alpha.6 jquery popper.js
To use tooltips globally:
Per the Bootstrap docs.
$('[data-toggle="popover"]').popover();
I have a Browserify-Budo repo here. If you want to see it working.