Develop Reference

how do I solve Uncaught TypeError: $(...).datepicker is not a function for yarn webpack

I'm going roundin circles, i have jquery working with most of my code. I transitioned from uglify.js using yarn encore with webpack.
Which file do I include, previously had the following which worked, how do I add the css files as well.
jquery-1.8.3.js
jquery-ui.js
jquery.form.js
jquery
currently I have in my app.js
require('../css/app.css');
// require jQuery normally other won't work
const $ = require('jquery');
// create global $ and jQuery variables
global.$ = global.jQuery = $;
require('jquery-ui');
require('jquery-form');
These added these manually
<link rel="stylesheet" href="
{{asset('bundles/site/css/mobiledatepicker.css')}}">
<link rel="stylesheet" href="
{{asset('bundles/site/css/jquerymobile.css')}}">

after bit more digging I found the answer
require('jquery-ui/ui/widgets/datepicker.js');

Load dependecy in bootstrap.js

My problem
I want to use admin-lte in my laravel app.
For this I want to require this js dependecy, I do this in my bootstrap.js (laravel-mix).
But the js isn't loaded, so for test I writed console.log('bootstrap.js loaded') in my bootstrap.js file, but the test isn't printed.
How to help me
The boostrap.js is loaded by default? I have the same problem with jquery, it isn't loaded, this is not normal I think.
My code
(resources/assets/js/bootstrap.js)
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
require('admin-lte')
console.log('bootstrap.js loaded')
(webpack.mix.js)
mix
.disableNotifications()
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

Solution
I must require bootstrap.js in my app.js. And all work!

Adding Colorbox to my ReactJS application creates "jQuery is not defined"

I'm trying to add Colorbox library to my project created with create-react-app. I've installed jquery-colorbox package via npm and added imports in one of my *.js files:
import $ from 'jquery'; // also tried: import jQuery from 'jquery';
import 'jquery-colorbox';
After that, all I'm getting is an error:
ReferenceError: jQuery is not defined
(anonymous function)
node_modules/jquery-colorbox/jquery.colorbox.js:1105
1102 |
1103 | publicMethod.settings = defaults;
1104 |
> 1105 | }(jQuery, document, window));
1106 |
1107 |
1108 |
Anyone have any suggestions how to manage with that problem?
Also, the code I want to run with the Colorbox library is something like this:
$(function() {
$('.colorbox-group' + id).colorbox({
rel: 'colorbox-group' + id,
maxWidth: '95%',
maxHeight: '95%'
});
});
UPDATE #1
Also... tried with CDN's and added these lines to index.html file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>
And run code inside one of JS files of my app: $.colorbox('something');.
Result:
TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery___default.a.colorbox is not a function

Solution 1: Using cdn for jquery & jquery-colorbox
Here is a simple github repository, I have made using reactjs. Hope it helps!
Solution 2: Using npm packages for jquery & jquery-colorbox
Here is a github repository using npm packages with react setup. I have also had the same issue that you got for 'jQuery' undefined. The solution is in webpack config by adding a webpack plugin for jQuery. Add this in your webpack-config file:
On top first import the webpack:
let webpack = require('webpack');
and then add this code:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
Solution 3: specifically for 'create-react-app'
Update the import in your app.js file like below:
import jQuery from 'jquery';
window.jQuery = jQuery;
require('jquery-colorbox');
Hope it solves your query.

It looks like it is using the variable jQuery rather than $. I might try importing the jQuery object by its name, for example:
import {$, jQuery} from 'jquery';
or maybe just:
import jQuery from 'jquery';

ES6 - Using babel/traceur with jQuery plugins

I want to be able to write ES6 with jQuery plugins and compile the code down to ES5 using Gulp Babel, without having to use Browserify to make them work.
For example, I may have a class like this:
import $ from 'jquery';
import somePlugin from 'somePlugin';
class myClass {
constructor(options) {
this.defaults = {
$body: $('body')
};
this.options = $.extend(this.defaults, options);
$body.somePlugin();
}
}
I can get this to work if I use Babelify but I'd prefer to find a way where I do not have to depend on another process. When I just use Babel, I get this error in the console: Uncaught ReferenceError: require is not defined.
I checked the code and it looks like it's turning the imports into requires.
Is there a way around this or will I have to stick with using Browserify (Babelify) to compile the JavaScript?
EDIT: I am currently using browserify-shim to make the jQuery plugins work too
EDIT2: No this is not about RequireJS - I'm trying to remove the use of Browserify with Babel

Answering my own question here. I did some digging and it looks like the best way of dealing with this issue at the moment is using jspm with the es6-module-loader.
Gulpfile:
var gulp = require('gulp');
var del = require('del');
var shell = require('gulp-shell');
gulp.task('clean', function(cb) {
del('dist', cb);
});
gulp.task('default', ['clean'], shell.task([
'jspm bundle-sfx app/main -o dist/app.js',
'./node_modules/.bin/uglifyjs dist/app.js -o dist/app.min.js',
'./node_modules/.bin/html-dist index.html --remove-all --minify --insert app.min.js -o dist/index.html'
]));
HTML:
<head>
<title>ES6</title>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app/main');
</script>
</head>
The repo I created here will also show you how to do it

How to install fastclick with ember-cli?

I've got an ember-cli project. I've used bower to install fastclick and have added it to my brocfile.
Now I'm trying to initialise it. In my app.js file I've added:
import FastClick from 'bower_components/fastclick/lib/fastclick';
But this gives me an error in the console: "Uncaught TypeError: Cannot read property 'default' of undefined". The inspector shows the following generated code:
["ember","ember/resolver","ember/load-initializers","bower_components/fastclick/lib/fastclick","exports"],
function(__dependency1__, __dependency2__, __dependency3__, __dependency4__, __exports__) {
"use strict";
var Ember = __dependency1__["default"];
var Resolver = __dependency2__["default"];
var loadInitializers = __dependency3__["default"];
var FastClick = __dependency4__["default"]; # chrome highlights this line
I assume the problem is that fastclick isn't compatible with the ES6 loader that ember-cli uses. I don't have requirejs, so how can I install fastclick into my project? Docs are at https://github.com/ftlabs/fastclick.
I've also tried adding this to index.html, but it doesn't have any effect when I build an iOS app:
$(function() {
FastClick.attach(document.body);
});

With Ember-cli v0.0.42
Install fastclick with bower
bower install fastclick --save
In your Brocfile.js, add the following above module.exports = app.toTree();
app.import('bower_components/fastclick/lib/fastclick.js');
Then in your app.js you can add
var App = Ember.Application.extend({
...
ready: function(){
FastClick.attach(document.body);
}
});
You'll also need to add "FastClick":true to your .jshintrc file's predefs, to prevent it from complaining. More info in the docs about Managing Dependencies.

You can also use ember-cli-fastclick :)

OK the jquery version didn't work, but putting the following in my index.html file did:
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);