Proper way to import NPM packages? (All steps done shown)

help
1

Turns out I’ve been making a mistake while importing from NPM. I’ll show all my steps. I made a test app:

meteor create test
cd test
meteor npm install

decided to just start and close the app

meteor
^C^C

then I tried installing moment, as it seemed like the go to example for node installs

meteor npm install --save moment

I checked in node_modules and ensured moment was installed, along with an update in packages.json

I then went into main.js and added

import moment from 'moment';

No errors shown in console, so I fire up chrome, open the dev console and check:

console.log(moment);

and… nothing. Ref errors.

What am I missing?

2

so far all seem correct, is main.js launching at all? what kind of Ref errors?

3

Unlike Atmosphere packages, NPM packages don’t export directly into the global context. With ES6 modules, imports are put into private hidden contexts as a security measure, unless attached to the global context.

Try adding the following, which will attach to the global context:

import { _moment } from 'moment';
moment = _moment;
4

That is interesting… Why then it works on my side well?

import moment from 'moment';
console.log(moment);

shows moment function…

5

Because console.log(moment) is running from within the secure context. Everything within the file is run securely, but isn’t visible to the browser’s console. Unless it’s attached globally. Then you can inspect the objects from the dev tools.

Note: it’s a common practice to attach things to the global context within the main.js file. You were on the right track there.

6

It would say “referror: moment is not defined”

7

Thank you, I will try this and reply back right away.

8

You are right. I did not notice first that @grandnewbien checked it in browser console… Btw, so far I imported moment only in those files where it was used, is there any advantage of importing it globally in this way?

9

This appears to work for moment! Although this was more of a symptom of another npm package I’ve been trying to install.

If an NPM package has dependencies, (specifically, I’m trying to install Techan.js, which uses d3), how would you make sure that these packages are exposed?

Trying

import {_techan} from 'techan';
techan = _techan;

in my /imports/ui/body.js

or even

import {_d3} from 'd3';
d3 = _d3;
import {_techan} from 'techan';
techan = _techan;

actually empties the DOM, letting nothing load, giving an error of:
Uncaught TypeError: Cannot read property 'min' of undefined(…)

Which is coming from this line in the packages/modules.js:
heikinashi: require('./heikinashi')(indicatorMixin, accessor.ohlc, d3.min, d3.max),

Yet again, I can see that all d3 packages are in the packages.json and node_modules, but trying to import them render the project useless.

Also,
console.log(techan)
and
console.log(d3)

Are ref errors again.

10

Ug. Welcome to import hell. It gets a little wild west from here on out. There’s different standards with dotted notation, slashes, etc. Here are some things you can try:

import { d3, min } from 'd3';
import { min } from 'd3'.min;
import { min } from 'd3.min';
import { min } from 'd3/min';

What you’re trying to do is import a submodule. Or possibly an implied dependency. Something that’s not the default main module. There could be security or implementation considerations preventing you from doing so along the way. So no guarantees.

1 Like
11

Darn, none of those seems to get it.

Oddly enough, someone made an atmosphere package with an outdated d3 and techan.js that does work, (somehow even console.log, without having to do global imports). But it’s so outdated it couldn’t work.

I’ll try digging around to see how dependencies were defined within those projects.

Sucks hitting a snag so hard it could kill using meteor as a platform.

12 
import * as d3 from 'd3'

That should take care importing all of d3.

13

Doesn’t seem to work sadly, sameUncaught TypeError: Cannot read property 'min' of undefined

14 
import * as d3 from 'd3'
//        or
import d3 from 'd3'

should work. If not, you’re going to want run meteor npm install d3

15

I’ve tried both. I verify that it’s in node_modules, but that min error still shows up. I’ve tried so many variations it’s crazy. I have a feeling techan.js referencing d3 isn’t being permitted, as alluded by @awatson1978