Best IT Recipes

Require not defined error with browserify

I am new to browning and trying to load npm modules in a browser, but I get the following error:

Not prepared ReferenceError: require not defined

I am following a tutorial from http://browserify.org/ . Created a javascript file with the following contents:

var unique = require ('uniq');

then run

npm install uniq

and

browserify main.js -o bundle.js

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

This is the contents of the 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 contents of bundle.js: http://pastebin.com/1ECkBceB

and this is script.js:

var unique = require ('uniq');

+22
javascript browserify
Feb 24 '15 at 13:00
source share
4 answers

The require function is only available in the context of the bundle.js script. Browserify accepts all the necessary script files and places them in the "bundle.js" file, so you only need to include "bundle.js" in the HTML file, not the "script.js" file.

+30
Feb 24 '15 at 13:11
source share

Short answer : remove script.js import

Longer answer : You get an error because the require method is not defined in the browser. You should not include script.js .

The idea behind Browserify is that you can share your sources with CommonJS modules and merge them into a single file, which will be used in the browser. Browserify will traverse all of your sources and merge all require d files into a bundle.

+7
Feb 24 '15 at 13:11
source share

I personally prefer to keep the library code and application code separate. Therefore, I also create something like bundle.js and script.js .

there is a simple workaround that does this job. This is somewhere in my browser file:

 window.require = require;

this will bring require to the "global" namespace. Then you can require whatever you want from script.js .

However, you are giving up ONE advantage: you will need to include all the necessary libraries in your browser file. You do not get the luxury of it, finding all your addictions, then!

I fully expect people to cry "dirty hacking" or "that doesn't mean it should be." Yes, may be. But I want these files to be split. And as long as I don't include anything called demand, I’ll be fine, thank you very much.

Sometimes one global can make a difference.

+7
Aug 18 '15 at 21:30
source share

It seems that you need to use a standalone package to run the script.

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

After that you should have window.Bundle in bundle.js .
Therefore, at this point you will be able to access script.js .

if you use 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 use gulp

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

See here for the Chart.js gulp file.

if you use babel

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

 // you should have something like that class Bundle { ... } export default Bundle;

So, because babel is now using Bundle , you have to 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 you will have:

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

Sources

Standalone browser builds

+4
Jan 05 '17 at 3:21
source share


More articles:


All Articles