CODEWITHSUNDEEP
javascriptbrowserifyrequire
valker
valker

Reputation: 143

Cannot call module's function after browserify

I'm trying to make simple page with JS module that will do something with the page. I need to use node.js's modules so I'm learning how to browserify works.

My HTML:

<!doctype html>
<html>
    <head>
        <script src="js/bundle.js" type="text/javascript"></script>
    </head>
    <body>
        <p>Hello world!</p>
    <script type="text/javascript">
        var test = require("./test.js");
        test.init();
    </script>
    </body>
</html>

This is my JavaScript (test.js):

"use strict";

alert("here1");

var init = function() {
    alert("here2");
}

exports.init = init

I'm making a bundle with:

browserify.cmd test.js -o bundle.js

When I'm trying to open the page it shows "here1" but doesn't show "here2". In browser's console I see:

Uncaught ReferenceError: require is not defined      index.html:9

Any ideas how to make module's function (init) work well?

Upvotes: 2

Views: 1927

Answers (2)

monist
monist

Reputation: 194

This is the top goog hit for "browserify cannot access", and I just wasted at least a couple hours not-getting-it myself. Perhaps other posts and blogs and tutorials are obtuse, or maybe it's just me, but here's an example I wish someone had shown me:

const trie = require('trie')    <---you want to use this module like in node

Run this (after installing browserify):

browserify -r trie -s trie > trie.browser.js    (if node can find it, browserify should)

-r = --require [module name]

-s = --standalone [globally-scoped(!) var name for module in browser JS env.]

(you can also use the -o for --output option instead of redirecting with >)

Then in you browser code you can do:

const LexTrie = new trie.Trie()
...or...
const LexTrie = trie.createTrieFromJson(lexicon_trie_json)

This beats making an intermediary text file with a require, which wasn't working for me to get the module to the global scope until I did something like:

window.trie = require('trie')

...at which point it worked, but I knew there had to be a simpler way.

Hope this helps some dense person like me in the future when they don't get the browserify docs because they don't highlight the --standalone option....

Upvotes: 1

Filip Matthew
Filip Matthew

Reputation: 328

You need to put all JavaScript code which contains anything from Node in the test.js file which you are then converting with the browserify into te bundle.js. In your example you are using a Node function require in the index.html which is not going to be converted. Browser then sees function require() which he doesn't know and this is where the problem is hidden.

Simply told: all your javascript code (containing Node) must be included in your index.html as a single bundle.js which is a browserifed result from your source files.

EDIT

Browserify doesn't (by default) allow you to call any browserified function out of the browserified code. But you can make it available by attaching the function into window scope.

This is test.js (which is then converted to bundle.js by browserify) and index.html 

"use strict";

alert("here1");

window.init = function() {
  alert("here2");
}
<!doctype html>
<html>

<head>
  <script src="js/bundle.js" type="text/javascript"></script>
</head>

<body>
  <p>Hello world!</p>
  <script type="text/javascript">
	init();
  </script>
</body>

</html>

Upvotes: 8

Related Questions