How to import plugin files into meteor app

help
1

I would like to use JointJS in my meteor application.
All needed files (and how it should be implemented) are shown here: http://jointjs.com/opensource#Download-JointJS (Backbone and Lodash are needed)

As I’m using meteor 1.4.2 I would like to use the module structure instead of the old package API, which would look like this: https://github.com/ADAIN/meteor-jointjs/blob/master/package.js

What I did so far is this:

  1. I added the packages backbone and stevezhu:lodash to the application and

  2. I imported the jointJS files in my index.js:

    import ‘…/plugins/jointjs/joint.js’;
    import ‘…/plugins/jointjs/joint.css’;

But now I get this error by starting my application:

Unable to resolve some modules:

"jquery" in /app/imports/ui/plugins/jointjs/joint.js (web.browser)
"backbone" in /app/imports/ui/plugins/jointjs/joint.js (web.browser)
"graphlib" in /app/imports/ui/plugins/jointjs/joint.js (web.browser)
"dagre" in /app/imports/ui/plugins/jointjs/joint.js (web.browser)

What am I doing wrong?

1 Like
2

You just added the file but you do not have the dependencies installed. It seems joint.js has some dependencies like jquery, backbone, grpahlib … and it can’t resolve it because it can’t be found in your ‘node_modules’. You haven’t added the dependencies to your project.

For example, in your joint.js file there are require statements which try to resolve the dependencies like here:
// joint.js ... var Backbone = require('backbone'); var _ = require('lodash'); var $ = Backbone.$ = require('jquery'); // ...

You have to add them via npm to your project if you just downloaded the file and copied it to your project. You would have to install this dependencies with npm yourself like:
meteor npm install backbone lodash jquery dagre --save
BUT WAIT: This isn’t a good idea. You don’t know which versions of the external dependencies your joint.js version needs and to handle it manually isn’t a good idea. The good news is, npm handles it for you.

So, you find a npm package on npmjs.com, named jointjs: https://www.npmjs.com/package/jointjs

To add it to your meteor project, remove the joint.js file you manually copied to your project. Then install joint.js with npm by running in your terminal within your meteor project:

  1. meteor npm install jointjs --save.
    And that’s it. It will download and install joint.js with all its dependencies to your project. Then you are able to use joint.js within your meteor project with the new module structure by simply importing it with:
    import joint from 'jointjs';

I don’t know if the css is part of the npm package. Just have a look at your ‘node_modules’ folder, search for your jointjs dependency and have look there. If so, meteor allows you to load css files within your js files like so:
import 'npm-package-name/stylesheets/styles.css';

Where npm-package-name would be jointjs followed by the path to the css from the jointjs folder within node_module. Maybe somethin like: import 'jointjs/joint.min.css';
You have to import the css only once. I prefer to add such css loading in my clients main.js.

You can read more about it in the guide: https://guide.meteor.com/build-tool.html#css-importing

2 Likes
3

@mimamuh Thank you very much for your long answer, which helps me to understand the thing more detailed.

Just two questions for that:

  1. How do I know what I have to import? I mean how do I know the correct name… import joint from 'jointjs'; or import joint from 'joint-js'; or import jointjs from 'jointjs';
    and don’t I have to use import { joint } from 'jointjs';?
  2. Is meteor npm install some-package --save the same then npm install some-package --save?
4

@j.myon

You simply can use the name of the dependency from https://www.npmjs.com. If the dependency is named jointjs, you can import it with ... from 'jointjs';. Is it named joint-js you import it with ... from 'joint-js'; Or have a look at your node_modules folder. You find the exact name within the dependency folder in the package.json file. This file describes which name the dependency has and which other dependencies it uses …

It depends on the implementation of the module and how it is exported. Normally it is documented on the npmjs.org page of the module or its corresponding github page. In case of joint.js it is missing or I didn’t find it directly and I had to look in the source code.
The module exports everything here:
https://github.com/clientIO/joint/blob/master/index.js#L3

I highly suggest that you read this blogpost about ES6s’ module syntax, so you will get a gaps what the difference is between import jointjs from 'jointjs'; and import { jointjs } from 'jointjs';.
The first imports the default export, the second a simply a named export. A module can have one or zero default exports but multiple exports;

For example, if my module exports the following:
export const A = 'a'; export const B = 'b'; export default A;
Now I want to import A, I can to it in two ways, as A will be exported as default export and as standard named export:
import A from 'my-module'; import { A } from 'my-module';

But when I want to import B from my module, I always have to use:
import { B } from 'my-module';

Yes and no. You can do both to install a npm package in your meteor project. But it is recommended that you use always meteor npm with meteor. The background is, npm installs dependencies with the node version you currently have installed globally on your machine. Type in your terminal node -v and you can see which version is installed.

When you install your npm packages with npm only, your dependencies will be installed with your globally installed node version. The case is, meteor brings its own version of node. So when you install a dependency with meteor npm it uses the current node version of meteor which is 4.x.x.

This could lead to issues, when you use npm ... instead of meteor npm ... when the versions of meteors’ node and your machines’ node is different and the way how the versions handle dependencies differentiate. For example, older node versions may use npm 2 vs newer versions of node use npm 3. This could case issues.

Just use meteor npm and you are safe.

5

Wow. Great. Thank you very much!