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.
Related
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({ ... })
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'm trying to import a jQuery plugin into a single Angular component. It runs in every other browser, but IE 11 chokes on it:
SCRIPT1002: Syntax error
main.bundle.js (1376,1)
When I click the error, it shows me the line at issue:
eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(\"../../../../jquery/dist/jquery.js\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__(\"../../../core/esm5/core.js\");\n// require('jquery');\n\n\n\n/*\ndjaodjin-annotate.js...
That's not all of it, but it appears to be to do with importing jQuery, and indeed, when I remove the jQuery import, it runs fine.
The issue may be that I'm importing jQuery into a JavaScript (.js) file, which is a jQuery plugin. Here's a simplified version of it:
import * as jQuery from 'jquery';
(function($) {
'use strict';
function Annotate(el, options) {
this.init();
}
Annotate.prototype = {
init: function() {
console.log('It\'s working.');
},
};
$.fn['annotate'] = function() {
const annotate = new Annotate($(this));
return annotate;
};
})(jQuery);
If I can't import jQuery into a jQuery plugin, how can I use a jQuery plugin? Is there a way around this?
BTW, I'm using jQuery only in one component. The rest of the application is clean of it.
I'd say you don't need to import jQuery in your plugin; your plugin should just assume that jquery has been included and fail if it has not
You can include jquery (first) then your plugin file into your project. Then in your component just declare jquery
declare let $ : any;
and instantiate your plugin like
$('div').annotate();
I actually found that my jQuery plugin had errors in it. It had a couple of lines with ES6 syntax that IE didn't like. But when Webpack compiles it, it turns the whole thing into a string, all on one line. At runtime, it then runs eval() on the string. So you don't get valuable error messages with line numbers. It just gives you the stupid error that I got. But I think #David has a good point. We maybe don't need to import jQuery.
I try to use the numbro js library using typescript.
Their numbro.d.ts export stuffs like that
declare const numbro: NumbroStatic;
export default numbro;
So I tried a very simple import
import numbro from 'numbro';
var string = numbro(1000).format('0,0');
console.log(string);
From the typescript part, that seem ok, I can tsc my file without error.
JS generated code is
"use strict";
var numbro_1 = require('numbro');
var string = numbro_1["default"](1000).format('0,0');
console.log(string);
Now, if I try to execute this code, I have this error :
numbro_1.default is not a function
If I change the js manually to
numbro_1(1000).format('0,0');
it works.
Did I missed something? It is a problem in their js export or that come from my code?
Thanks
Use:
import * as numbro from 'numbro';
Use
import numbro = require("numbro");
See also this answer: What does "... resolves to a non-module entity and cannot be imported using this construct" mean? for why you should do this
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/