How to debug client side NPM package within a Meteor 1.3 package?

Note: I am a mostly self-taught javascript amateur that has almost all of my experience on the Meteor platform. What lies below is an in-progess quest to properly write a 1.3 package.

When writing a package I would like to follow the Meteor 1.3 best practices. My specific goal is to import the Prosemirror NPM package. But I will try to generalize into the case of importing a client-side NPM package for use on the client side within a package.

In the guide it says NPM dependencies can be added with Npm.depends but it only mentions that for server dependencies.

The guide shows the use of a client-side NPM package in React but they use tmeasday:check-npm-versions in that package which implies the dependency was installed directly.

Relevant FAQs:

  • Should I use api.exports() or ES6 export?
    • As per the migration notes it is suggested to use export from the mainModule
  • Is there any way to debug incorrect usage of ‘import’ and ‘export’ in a package?
    • After you’ve added your NPM.depends in package.json and added an import of that package in your mainModule check the import worked with console.log
    • Same within you demo app
  • I see my package variable in the console but it is not defined?
    • If you are using the ecmascript package your .js files will each be a module. Stuff imported into a module will not be global.
      So how does one properly integrate a NPM client side package into a Meteor 1.3 package?

In the package.js I have:

Npm.depends({ prosemirror: '0.5.1'});

In my packages mainModule js file:

import { ProseMirror } from "prosemirror/dist/edit"


export const Prosemirror = 'ProseMirror';

I add the local package to my demo project.

meteor add prosemeteor:prosemirror

In my demo project I use

import { Prosemirror } from 'meteor/prosemeteor:prosemirror'

Problem is that when I run the demo I don’t see ProseMirror as a global.

If looking at code would be helpful, here’s the mess I created after trying a number of different things to add Prosemirror properly: To get things going I just want to create a wrapper package for Prosemirror NPM - then I will extend it to be more deeply integrated.

Edit1: added answer to export vs api.exports questions
Edit2: Fixing bugs mentioned below with using name

I haven’t tried your sample out, but one quick thing:

export const name = 'ProseMirror';

This means you’re giving your export a name of name.

(see ECMAScript 6 modules: the final syntax for one of the best module explanations available.)

I’ve always been a bit curious about that – is export const name supposed to be required?

It doesn’t have to be in that exact format, but an export of some kind is required (unless or course you’re just interested in side effects from the file being included). This might be a bit misleading in the Guide as it lists:

export const name = 'my-package';

but name is actually the const name. The guide shows this after:

import { name } from 'meteor/username:my-package';

Maybe it should show something like the following instead:

export const myCoolPackage = 'my-package';
import { myCoolPackage } from 'meteor/username:my-package';

All of that being said, the export itself can take any of the many allowed export shapes (export const blah, export default blah, export default someFunction() { ... }, etc, etc).

Just to add for the OP - maybe take a look at the tmeasday:check-npm-versions source to see how it’s setting this all up.

Good catch, trying to learn the modern way of doing things and copy/paste errors always seem to find me. I’ll try changing it tonight.

Any opinions on the best way to check that your imports and exports are working properly, or to find where in the chain things broke?

Changed name to myName in Meteor Guide.

1 Like

Got it. Thanks for the tip again.

The first issue was the mis-named export

The second issue was my understanding of the implications of the module system. It seems as though when I A) have a named export that is exported from a package and B) an app using said package, the named export shows up in the global namespace as undefined. E.g. if I typed Prosemirror into the console it would auto-complete but be undefined.

If I console.log Prosemirror inside a file I import it into within the app it returns the Prosemirror object as expected/