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');
Related
I need to export and import a plain js file to work keyboard navigation correctly.
I am following the example here,and using import and export pattern of ES5 but it is not linking one js file to another.
https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html#
This is my codepen.io link
https://codepen.io/ankita-sharma-the-flexboxer/project/editor/DzdmBE
module.exports = PopupMenu;
var myModule = require('./popuplinks');
There are multiple ways of exporting and importing JavaScript modules, in the past, we were using CommonJS modules which are in a format you've presented, they can be used in following way.
// module.js
const myModule = "something"
module.exports = myModule
// And then if you want to import in another file, you're using following sentence.
const module = require("./module")
Actually we're using ES6-like imports, you can read about them at MDN, I'm attaching a small sample of ES6+ export.
// module.js
const myModule = "Something"
export { myModule }
// And then
import {myModule} from './module'
Actually you should read post that will resolve your issue
I am trying to incorporate the Treant.js library in my Vue app in order to generate a tree diagram from a JSON data object. Here are my import statements in my main view...
import Vue from "vue"
import store from "../../store"
import { getWebSocket } from "../../services/util.js"
import '../../assets/css/Treant.css'
import '../../assets/scripts/raphael'
var Treant = require("../../assets/scripts/Treant")
and here is where I attempt to call the Treant constructor (this.localTrace.route is the JSON object) ...
var tree = new Treant(this.localTrace.route, function() {alert('Tree Loaded')})
When I try to launch the page, I receive an error that states "Treant is not a constructor", and the app fails to build the tree.
CONVERSELY
I attempted to import the library globally in my main.js file like so...
import "./assets/scripts/raphael"
import "./assets/scripts/Treant"
When I do it this way, Vue can make its way into the Treant.js code, but then gives me this error instead
this._R.setSize is not a function
at Tree.handleOverflow (Treant.js?e3b3:842)
at Tree.positionNodes (Treant.js?e3b3:768)
at Tree.positionTree (Treant.js?e3b3:512)
at new Treant (Treant.js?e3b3:2164)
Any thoughts on how to make this work?
It's been a long time and you probably found a solution, but just for other guys visiting this tread:
open your main.js Vue initialization file and add:
import Raphael from "raphael"
window.Raphael = Raphael
Now Treant will be able to use Raphael correctly.
I want to use the validator for an express project. How do I import just two subsets of the packages directly?
Like:
import {isEmail, isEmpty} from 'validator';
or importing each on a separate line.
I just want to know if there is another option apart from import validator from 'validator'; as stated on the https://www.npmjs.com/package/validator
const isEmailValidator = require('validator').isEmail;
const isEmptyValidator = require('validator').isEmpty;
isEmailValidator('bla#bla.com');
Like this you mean? What you wrote should also be valid:
import {isEmail, isEmpty} from 'validator';
isEmail('bla#bla.com');
Edit for clarification: As you can see here https://github.com/chriso/validator.js/blob/master/src/index.js the library is exporting an object with each function. You can import everything import validator from 'validator' or you can use destructuring to get only a few properties.
const {isEmail, isEmpty} = require('validator');
This will not actually stop node from importing all of validator though. This just has node load the validator object that is returned from that modules export and then destructures isEmail and isEmpty out of the exported Object.
Maybe whenever ES6 modules become full supported you can use the regular import syntax. See node.js documentation: ECMAScript Modules.
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 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