I try to using emojionearea with jquery in webpack like
import $ from 'jquery'
import emojione from 'emojione'
$('.class').emojioneArea({... })
I tested Jquery working well But when using emojioneArea that has error like
Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).emojioneArea is not a function
How to make that working, thanks.
According to the document, it looks like you import the wrong package name. It's supposed to be emojionearea instead of emojione. I think you also need to expose jquery in the global for other plugins too as following:
import $ from "jquery"
import 'emojionearea';
global.$ = global.jQuery = $;
$('.class').emojioneArea({ ... })
Related
I'm working on angular app in which i want to implement draggable. There were questions about that in the past but nothing works for me. What I tried:
npm install jquery jquery-ui
and then adding following lines to angular.json
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jquery-ui/jquery-ui.js"
]
and then importing it to my component like
declare let $: any;
or
import $ from 'jquery';
or
import $ from 'jquery';
import 'jqueryui';
but I'm still getting error:
TSLint: unused expression, expected an assignment or function call(no-unused-expression)
when placing this line in ngOnInit:
$('#draggable' as any).draggable;
You should use it like (call a function):
$( "#draggable" ).draggable();
P.S: Don't use jQuery with Angular :)
Consider using drag-and-drop from Angular CDK (developed by Angular team):
https://material.angular.io/cdk/drag-drop/overview
I am a little lost when trying to integrate a javascript library which is not an ES6 module.
I am trying to import 'jointjs' into my webpack project.
How can I import the function joint?
I can do this:
window.$ = require('jquery');
window.joint = require('jointjs');
And then directly in the view, I can use a script tag to put my javascript. But if I try to import the joint function like this:
import 'joint' from 'jointjs';
var graph = new joint.dia.Graph;
//...
It raises an error:
Uncaught TypeError: Cannot read property 'dia' of undefined
How can I make it work?
I have the feeling that I have to use ProvidePlugins, Exports-Loader or something like that... But it is not clear at all for me.
You can import like this for non es6 code
const joint = require('jointjs');
Do not add quotes to the import
import * as joint from 'jointjs';
If it doesn't work, you can probably try using require as
const joint = require('jointjs');
I have read a few Q/A on here on how to use external libraries in TS. Following a lot of the suggestions, I'm registering BT alert to an element like this:
import * as $ from "jquery";
import * as bootstrap from 'bootstrap';
window["$"] = $;
window["jQuery"] = $;
$("#clientAlert").alert();
and everything work just fine.
Now I need to do the same for JQuery-Ticker
import * as jqueryTicker from "jquery-ticker";
$('.newsticker').ticker();
WebPack build fails with this error:
error TS2339: Property 'ticker' does not exist on type
'JQuery'.
You could cast it to <any> or extend the jquery typing to add your own method.
(<any>$(".newsticker")).ticker();
//Or add your own custom methods (Assuming this is added by yourself as a part of custom plugin)
interface JQuery {
newsticker():void;
}
Or this
($(".newsticker") as any).ticker();
Try this :
($(".newsticker") as any).ticker();
The usual way of import "datatables.net-select"; doesn't seem to work.
I've looked on the website and it says to do:
var $ = require( 'jquery' );
var dt = require( 'datatables.net' )( window, $ );
But I get a Cannot set property '$' of undefined
Am I missing something?
Figured it out.
The only reason why I thought it wasn't working was because the css wasn't there. Make sure you also import the -dt stuff as well.
I.e:
import $ from 'jquery';
import 'datatables.net';
import 'datatables.net-dt/css/jquery.dataTables.css';
I'm using DataTables 1.10.19 with Symfony 4.1.7 + Webpack Encore 0.21
import $ from 'jquery';
import dt from 'datatables.net-bs';
global.$.DataTable = dt;
This worked for me:
window.$ = require('jquery');
var dt = require('datatables.net');
window.$.DataTable = dt;
like described here https://github.com/DataTables/DataTables/issues/434
After much fiddling I found something that works for me.
If you look at node_modules/datatables.net/js/jquery.dataTables.js you can see what's going on. If you're not using AMD, it's probably going to use the module.exports = function (root, $) version.
So the proper way to call it is
import $ from 'jquery'
import setup from 'datatables.net'
window.DataTable = setup(window, $)
Assigning to window.DataTable is optional.
However, the TypeScript typings seem to assume that datatables.net is returning some Api object, to fix that, create datatables.net.d.ts and throw this in it:
declare module 'datatables.net' {
export default function factory(root: Window, $: typeof import('jquery')): typeof import('datatables.net')
}
That makes the errors go away for me.
I'm trying to use Bootstrap with jQuery. I'm using Browserify with a Babel transform to compile. I get the following error.
Uncaught ReferenceError: jQuery is not defined
I've tried importing the packages like this, but I get the above error.
import $ from 'jquery';
import Bootstrap from 'bootstrap';
Searching around, I found this answer, so I tried this but I still get the same error.
import $ from 'jquery';
window.$ = window.jQuery = $;
import Bootstrap from 'bootstrap';
Bootstrap.$ = $;
Am I importing these packages incorrectly with ES6 or is it done in a different way? The last thing I tried was importing the packages without ES6 like this, but I still got the same error.
window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap');
Bootstrap.$ = $
The accepted answer helped me to right track but the final solution for me was a bit shorter so I will post also here.
// Importing jQuery in ES6 style
import $ from "jquery";
// We need to expose jQuery as global variable
window.jQuery = window.$ = $;
// ES6 import does not work it throws error: Missing jQuery
// using Node.js style import works without problems
require('bootstrap');
As mentioned by Pete TNT, there is a bug in the Bootstrap package I am using. I switched to using this Bootstrap package and made the following changes to my code.
window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap-sass');
Bootstrap.$ = $;
require('../../../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap');
It looks like, for the time-being, ES6 imports will not work with jquery and bootstrap packages in the way I was trying to use them.
I've tried many many solutions but for some reason I had to define the global jquery in lowercase on the base script (eg. main.js)
import jQuery from 'jquery'
global.jQuery = jQuery
global.jquery = jQuery // jquery lowercase was the solution for me
global.$ = jQuery
let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
This solutions also works for vue-cli + jquery + bootstrap
#Enijar's solution didn't work for me. Had to use old CDN method.
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>
https://code.jquery.com/