How do I import a third party package into Meteor?

help
1

xpost to StackOverflow, didn’t get anything.

I’m trying to repackage Gibberish.js for Meteor, and so far nothing is working. The package has its own npm dependencies. I first tried to fork it and then load it as a git submodule. I had this in my package.js:

Npm.depends({
    "connect": "2.25.7",
    "serve-static": "1.5.3",
    "uglify-js": "2.4.15"
});

Package.onUse(function(api) {
  api.versionsFrom('1.1.0.2');
  api.addFiles('build/gibberish.js', ['client','server']);
});

It complained that Gibberish.init() wasn’t a function, so I’m guessing it didn’t see the package. So then I realized gibberish-dsp is its own npm package, so I tried to include it via npm. I used this:

package.js

Npm.depends({
    "connect": "2.25.7",
    "serve-static": "1.5.3",
    "uglify-js": "2.4.15",
    "gibberish-dsp": "2.3.2"
});

Package.onUse(function (api) {

  api.addFiles([
    'lib/gibberish.js',
  ], ['server']);

  api.export([
    'gibberish'
  ]);

lib/gibberish.js:

juice = Npm.require('gibberish-dsp');

That gave it a callback error. I guess Meteor can’t do callbacks with third party packages?! So I tried meteorhacks:npm, which apparently fixes the callback error. And I tried this:

  if (Meteor.isServer) {

    console.log('server');
      var gibberish = new Gibberish();
      var init = Async.wrap(init);
      gibberish.init();

     }

});

And with my gibberish submodule in my /packages/ folder, I get a SyntaxError: Unexpected token Y, referring to “Bad HTML” in the gibberish package. Apparently it’s trying to read it as a Meteor HTML file (i.e. without DOCTYPE etc.) I don’t want to change every single file in the package!

And I am using meteor add user:gibberish to add it.

I’ve probably spent about 20 hours on this already. Why is it so hard to load an external library?!?! What else can I do? I want to like Meteor but I’m ready to give up.

2

Did you take a look at this? https://www.discovermeteor.com/blog/wrapping-npm-packages/

3

The async stuff is way over my head. They’re only for the server-side? The Gibberish package is client-side (I think? It just plays music, doesn’t call anything). In normal html, I just call <script>gibberish.js</script> (although Meteor complained about the callbacks in the code). I feel like I’m making this way harder than it actually is…

1 Like
4

I don’t know this package, but if it is client-side, why are you packaging it for the server?

5

I don’t knowww! I thought you had to repackage everything you used. Also, the fact that Meteor complained about the callbacks in the js file made me think it had to be repackaged or something.

Currently, I have it in client/lib/compatibility, but:

1.) The node modules needed for gibberish have illegal tokens, and there are no equivalent Atmosphere packages (e.g. uglify-js is needed by gibberish, I don’t know if it can still be run if I don’t have node_modules in the gibberish folder).

2.) I delete the Gibberish/node_modules folder, and now require is not defined.

EDIT: I just added mrt:require and got this:

Uncaught ReferenceError: __dirname is not defined
documentation.js:5 Uncaught TypeError: Cannot read property 'converter' of undefined
node_test.js:7 Uncaught TypeError: Cannot read property 'AudioContext' of undefined
server.js:3 Uncaught TypeError: connect is not a function
6

I don’t have the time (or the inclination TBH :wink:) to package this. However, the simplest (non-packaged) way to get this working is using client/compatibility.

  • Remove any homebrew packages you are using to try to make this work (or start afresh with a new project).
  • Build gibberish.js in the recommended way.
  • Copy gibberish.js into client/compatibility.

You now have access to the Gibberish object in your client code.

3 Likes
7

YES it worked! I was stupidly using the entire repo in client/compatibility when I just needed gibberish.js and its scripts.

Now, the only problem is when I use one of the scripts, it says “Gibberish not defined,” but it still plays. In the original repo, gibberish.js was in app/build/ and the scripts were in app/scripts. I had to put all the scripts together in client/compatibility, and I guess it doesn’t like that.

But it finally works now after five painful days! :slight_smile: