CODEWITHSUNDEEP
javascriptnode.jsnpmbrowserify
Mark
Mark

Reputation: 5058

Using NPM package in the browser with Browserify

I'm trying to use Browserify so that I can use an npm package in the browser. The package I'm trying to use is this

I have a fcs.js file:

// Use a Node.js core library
var FCS = require('fcs');

// What our module will return when require'd
module.exports = function(FCS) {
  return FCS;
};

And an index.js file:

var FCS = require('./fcs.js');

console.log('FCS IS ');
console.log(FCS);

I then ran:

browserify index.js > bundle.js

And created an index.html file:

<html>
<script src="bundle.js"></script>
<script>
    var fcs = new FCS();

</script>
</html>

But I end up with the error:

Uncaught ReferenceError: FCS is not defined

Maybe I'm not grasping the concept correctly. How can i use this package in the browser? Thanks.

Upvotes: 0

Views: 1370

Answers (3)

Kryten
Kryten

Reputation: 15740

@JoshBeam's answer is correct - in order to expose assets inside the browserify bundle, you need to attach something to the window object. But instead of exposing specific assets, I wanted something more general.

Here's what I did:

in my app.js

require('this')
require('that')
require('./modules/mycode')
...

window.req = require

And in my <script> tag in my HTML:

something = req('./modules/mycode')

Notice that, instead of assigning the require function directly to window.require, I gave it a different name. The reason for this is simple: if you call it window.require, you're overwriting the original require and you'll find yourself in an infinite loop of recursion (at least until the browser runs out of stack space).

Upvotes: 1

spinningarrow
spinningarrow

Reputation: 2436

The problem is that your inline script (in index.html) is expecting a global variable called FCS to exist (when you do new FCS()). This is not the case because in index.js, your FCS variable is scoped to that file.

You should write all your scripts in separate files and bundle them all using browserify, avoiding the inline script or make FCS global, by attaching it to window.

Upvotes: 0

Josh Beam
Josh Beam

Reputation: 19772

Don't do this: require('./fcs.js');

Do this: require('./fcs');

When you require something, the extension is implicitly .js. Also make sure that your module, FCS, has an entry point (the default is index.js, but you can change that in the main entry in the package.json).

Also, in your index.html document, you're expecting that FCS is a global object. I haven't seen the internal code of FCS, but it will only be globally available if it's attached to the window object.

When you require something, it only makes it available to the rest of your code where it's required. If you want to make it globally available, you have to attach it to the window object, just like anything else.

In other words, the internals of your FCS module might look something like:

// node_modules -> fcs -> index.js

var FCS = function() {};

window.FCS = FCS; // this makes it globally available

module.exports = FCS; // this lets you require it

Upvotes: 3

Related Questions