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);
Related
I am trying to use a node module called "tagify" in my node.js app. In the readme file for the package (https://www.npmjs.com/package/#yaireo/tagify#installation) it says to setup as follows:
npm i #yaireo/tagify --save
// usage:
import Tagify from '#yaireo/tagify'
var tagify = new Tagify(...)
I ran the npm command and it installed fine. My EJS file has this (not shown is the input name="tags" element):
<script>
import Tagify from '#yaireo/tagify';
var input = document.querySelector('input[name=tags]'),
// init Tagify script on the above inputs
tagify = new Tagify(input);
</script>
When I load the page, I get this in the console:
Uncaught SyntaxError: Unexpected identifier (reference to 'import' line)
I'm very new to this and very confused. I've been searching the internet for two hours and can't figure out the basic task of getting this package to work. If this questions is redundant, please direct me elsewhere, because I don't know where to go.
<script src="https://cdn.jsdelivr.net/npm/#yaireo/tagify#2.9.7/dist/tagify.min.js"></script>
<script>
var input = document.querySelector('input[name=tags]'),
// init Tagify script on the above inputs
var tagify = new Tagify(input);
</script>
This code is not raw. you need to use technologies like babel or webpack to use it. easy to run this link will be enough
I try to require the jquery pulgin perfect-scrollbar to my laravel javascript. So I have runed
npm install perfect-scrollbar
In Line 1 of my Javascript file (located under ressources/assets/javascript/material-dashboard/myfile.js) I require the plugin with this attempt
require('perfect-scrollbar');
The myscript.js is required to the app.js with require('./material-dashboard/myscript.js')
Now the browser console tell me
Uncaught TypeError: $(...).perfectScrollbar is not a function
The assets are compiled with
npm run dev
The content of myscript.js
require('perfect-scrollbar');
(function() {
isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
if (isWindows) {
// if we are on windows OS we activate the perfectScrollbar function
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
$('html').addClass('perfect-scrollbar-on');
} else {
$('html').addClass('perfect-scrollbar-off');
}
})();
What is wrong?
Thanks for your help!
Just to simplify your job, under bootstrap.js file that handles
require('perfect-scrollbar');
simply change it to
window.PerfectScrollbar = require('perfect-scrollbar').default; and you will be good to go. Only answers questions if using compiling assets in laravel with bootstrap.js
As per the docs, to initialise an element with the plugin you should do something like the following:
import PerfectScrollbar from 'perfect-scrollbar';
new PerfectScrollbar(".sidebar .sidebar-wrapper");
new PerfectScrollbar(".main-panel");
If you want to use require instead of import you would do something like:
let PerfectScrollbar = require('perfect-scrollbar').default;
Lastly, it doesn't look like the plugin is meant to work with jQuery out of the box, however, if you want to use with jQuery like you are in your post you could do the following:
import PerfectScrollbar from 'perfect-scrollbar';
$.fn.perfectScrollbar = function (options) {
return this.each((k, elm) => new PerfectScrollbar(elm, options || {}));
};
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
I am trying to use jquery plugins in my react application. Every time I try to use some jquery third party plugin, I get an error saying $(...).somePlugin not a function. Currently I am trying to use ionRangeSlider. It is giving me error
Uncaught TypeError: (0 , _jquery2.default)(...).ionRangeSlider is not a function
js file
import $ from 'jquery'
import 'bootstrap-tagsinput'
class AddTagSection extends Component {
componentDidMount=()=> {
this.slider = $(this.inputSlider).ionRangeSlider();
}
<div className="irs-wrapper">
<input type="text" ref={node=>this.inputSlider=node} className='input-slider' id="ionSlider-newTag" name="ionSlider"/>
</div>
Below is the function which is getting called in ionRangeSlider.js (plugin)
$.fn.ionRangeSlider = function (options) {
return this.each(function() {
if (!$.data(this, "ionRangeSlider")) {
$.data(this, "ionRangeSlider", new IonRangeSlider(this, options, plugin_count++));
}
});
};
As far as I have read on web, this is a multiple jquery clashes issue.
About my Application: My project has jquery installed via npm. So there is one jquery present in package.json. I have also included jquery in scripts in my index.jade file. So there is another one there.
This is not an issue of jquery placed after plugin's js file. I placed jquery at the top in the scripts of index.jade file.
block head_scripts
script(src='https://code.jquery.com/jquery-3.2.1.min.js')
script(src='/public/ion.rangeSlider.js')
link(href='/public/normalize.css' rel="stylesheet")
link(href='/public/ion.rangeSlider.css' rel="stylesheet")
link(href='/public/ion.rangeSlider.skinFlat.css' rel='stylesheet')
I also tried noConfilct. But that too didn't work.
var $ = jQuery.noConflict();
$( ".slider" ).ionRangeSlider();
I tried including jquery in my webpack config.js file
new webpack.ProvidePlugin({
React: 'react',
$: 'jquery',
jQuery: 'jquery'
}),
Nothing from the above worked. Everytime I got the same error.
How can I solve this?
If your project contains a different version of jQuery than the one specified in ionRangeSlider package.json dependencies and you're using yarn to install your project's dependencies and webpack to bundle the project, then this might be the source of the problem. Yarn will install node_modules even in ion-range-slider folder, which will cause that the webpack will build the project with your jQuery, as well as with the one in ion-range-slider/node_modules. Hence the jQuery versions clash. ionRangeSlider initiates with the first jQuery and your project's jQuery won't contain it.
It's kind of a fault of ionRangeSlider developer because he should not specify the jQuery in dependencies, but instead in peerDependencies.
try changing internal url to external url for rangeslider
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" />
then do import Slider from 'react-rangeslider' if not using the es6 transpiler then do var Slider = require('react-rangeslider')
I also had this error, looks like a Jquery version conflict please try downgrading ion-rangeslider in package.json "ion-rangeslider": "2.2.0".
I'm getting ReferenceError: _ is not defined the angular-google-maps
I don't really understand why I'm getting this error, because I'm doing exactly what it is written on the website.
Also I searched for similar questions, but they didn't helped.
bundle.js
$ = window.$ = window.jQuery = require('./lib/jquery');
require('./lib/angular-simple-logger.js');
require('./lib/angular-google-maps.js');
require('./lib/lodash.js');
I'm importind bundle.js into the index.html. I also tried to use ngLodash, but no results.
app.js
var app = angular.module('app', [
'ngLodash',
'nemLogging',
'uiGmapgoogle-maps'
]);
app.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: '{myKey}',
v: '3.20',
libraries: 'places' // I don't need the whole map, only the places
});
});
Also I enabled the GoogleMaps Api from the Google Developer Console
Does someone have some experience with this library and can give me a hint?
You need to add the _ underscore library as a dependency. npm install underscore, or add to your bower config, or whatever you use for dependecy management.
<script src="bower_components/underscore/underscore-min.js"></script>
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