39

I'm new to browserify and trying to load npm modules in browser but I'm getting the following error:

Uncaught ReferenceError: require is not defined

I'm following the tutorial from http://browserify.org/. Created javascript file with the following content:

var unique = require('uniq');

then run

npm install uniq

and

browserify main.js -o bundle.js

the bundle.js file is generated and I included it in my html but still getting the above error. Any ideas what am I doing wrong?

This is the content of final HTML file:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="bundle.js"></script>
    <script src="script.js"></script>
</head>
<body>

</body>
</html>

This is the content of bundle.js: http://pastebin.com/1ECkBceB

and this is script.js:

var unique = require('uniq');

2
  • Can you post more code for context? What is the contents of bundle.js and script.js
    – sma
    Commented Feb 24, 2015 at 13:02
  • @sma Just updated the question with the content of both files. Commented Feb 24, 2015 at 13:06

4 Answers 4

41

The "require" function is only available in the "bundle.js" script context. Browserify will take all the script files necessary and put them into the "bundle.js" file, so you should only have to include "bundle.js" in the HTML file, not the "script.js" file.

3
  • 3
    so i can't require the module which i bundled together for that purpose ..?
    – eran otzap
    Commented Sep 29, 2015 at 12:23
  • 1
    You can use "require" in the source code that you write before you run browserify on it. So in your source javascript you can require whatever modules you need, then when you browserify the source, it will package all the source (including the modules you required) up into the "bundle.js" file which you can reference in your html. Hope that helps!
    – kevinvile
    Commented Sep 30, 2015 at 12:39
  • 4
    I understand now - browserify doesn't create a module you can require() from a browser - it packages up your code and wraps the whole thing in a closure - you need special steps to make a library you can use from a browser. I'l figure these steps out and add them to this answer, since a good number of people will make the same misconception the OP and myself made. Commented Feb 9, 2017 at 0:25
15

I personally prefer to keep my library code and application code seperate. So i also create something like a bundle.js and a script.js.

there is a simple workaround, that makes this work. This is somewhere in my browserify-file:

window.require = require;

this will expose require into the "global" namespace. You can then require all you want from your script.js.

You do give up ONE advantage, though: you'll have to include all the required libraries in your browserify file. You don't get the luxury of it finding all your dependencies, then!

I fully expect people to cry "dirty hack" or "this is not how it's meant to be". Yes, maybe. But I want those files seperate. And as long as i don't include anything else that is called "require", i'll be fine, thank you very much.

Sometimes one global can make all the difference.

11

It seems that to run a script like that you have to use standalone on the bundle.

browserify main.js --standalone Bundle > bundle.js

After that you should have window.Bundle in bundle.js.
So at that point you should be able to access from script.js.

if you are using grunt

If you are using grunt install grunt-browserify.

npm install grunt-browserify --save-dev

And then on grunt.js Gruntfile:

// Add the task
grunt.loadNpmTasks('grunt-browserify');

// Add the configuration:
browserify: {
    dist: {
        options: {
            // uncomment if you use babel
            // transform: [
            //     ["babelify", { "presets": ["env"] }]
            // ],
            browserifyOptions: {
                standalone: 'Bundle'
            }
        },
        files: {
           "bundle.js": ["main.js"]
        }
    }
},

if you are using gulp

 // on your build task
 var bundled = browserify('main.js', { standalone: 'Bundle' })
               .bundle()
               .pipe(source('bundle.js'))
               .pipe(gulp.dest(outDir));

See here for Chart.js gulp file.

if you are using babel

If you are using babel and es6 probably you are exporting your Bundle class.

// you should have something like that 

class Bundle {
    ...

}

export default Bundle;

So because of babel now to use Bundle you should use Bundle.default and so:

// in script.js
var bundle = new Bundle.default();

To avoid this syntax you can override Bundle with Bundle.default.

At the end of bundle.js insert:

window.Bundle = window.Bundle.default;

So now on you'll have :

// in script.js
var bundle = new Bundle();

Sources

Standalone browserify builds

2
  • 1
    the ending part about Babel and Bundle.default()..doesn't make sense. "so now you'll have:" new Bundle.default() which is no different than what you had a few paragraphs before anyway.
    – joedotnot
    Commented Nov 14, 2019 at 12:32
  • tnx @joedotnot fixed. The main point of the override as you deducted was to have var bundle = new Bundle(); Commented Nov 14, 2019 at 13:26
9

Short answer: remove the script.js import

Longer answer: You are getting the error because the method requireis not defined in the browser. You shouldn't include script.js.

The idea behind Browserify is that you can split up your sources using CommonJS modules and bundle them into one file to be used in the browser. Browserify will traverse all your sources and will concatenate all required files into the bundle.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.