Browserify: runtime in browser 'Cannot find module...' error

Question

I'm trying to learn Browserify, and I have a test project where I am bundling two javascript files into one bundle.js and including it on the page. I get this error at runtime in the browser:

Uncaught Error: Cannot find module './test1'

I use the following command to bundle the js:

browserify js/test1.js js/test2.js -o js/bundle.js -d

The files are as follows:

test1.js

exports.hello = function () {
    alert('hello');
}

test2.js

var test1 = require('./test1');

exports.hello2 = function () {
    test1();
    alert('hello2');
}

bundle.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
exports.hello = function () {
    alert('hello');
}
},{}],2:[function(require,module,exports){
var test1 = require('./test1');

exports = function hello2() {
    test1();
    alert('hello2');
}
},{"./test1":undefined}]},{},[1,2])
//# sourceMappingURL=data:application/json;charset:utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL1VzZXJzL2pvaGFyYS9BcHBEYXRhL1JvYW1pbmcvbnBtL25vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJqcy90ZXN0MS5qcyIsImpzL3Rlc3QyLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FDQUE7QUFDQTtBQUNBOztBQ0ZBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsImZpbGUiOiJnZW5lcmF0ZWQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiKGZ1bmN0aW9uIGUodCxuLHIpe2Z1bmN0aW9uIHMobyx1KXtpZighbltvXSl7aWYoIXRbb10pe3ZhciBhPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7aWYoIXUmJmEpcmV0dXJuIGEobywhMCk7aWYoaSlyZXR1cm4gaShvLCEwKTt2YXIgZj1uZXcgRXJyb3IoXCJDYW5ub3QgZmluZCBtb2R1bGUgJ1wiK28rXCInXCIpO3Rocm93IGYuY29kZT1cIk1PRFVMRV9OT1RfRk9VTkRcIixmfXZhciBsPW5bb109e2V4cG9ydHM6e319O3Rbb11bMF0uY2FsbChsLmV4cG9ydHMsZnVuY3Rpb24oZSl7dmFyIG49dFtvXVsxXVtlXTtyZXR1cm4gcyhuP246ZSl9LGwsbC5leHBvcnRzLGUsdCxuLHIpfXJldHVybiBuW29dLmV4cG9ydHN9dmFyIGk9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtmb3IodmFyIG89MDtvPHIubGVuZ3RoO28rKylzKHJbb10pO3JldHVybiBzfSkiLCJleHBvcnRzLmhlbGxvID0gZnVuY3Rpb24gKCkge1xyXG5cdGFsZXJ0KCdoZWxsbycpO1xyXG59IiwidmFyIHRlc3QxID0gcmVxdWlyZSgnLi90ZXN0MScpO1xyXG5cclxuZXhwb3J0cyA9IGZ1bmN0aW9uIGhlbGxvMigpIHtcclxuXHR0ZXN0MSgpO1xyXG5cdGFsZXJ0KCdoZWxsbzInKTtcclxufSJdfQ==

marcel · Accepted Answer · 2015-06-11 08:53:47Z

1

you have no entry point that uses test1 or test2. Add an entry like this:

// js/app.js
var test2 = require('./test2');

(function() {
    test2();
})();

browserify js/app.js -o js/bundle.js -d

Browserify will dissolve all dependencies beginning at the entry.

edited Jun 11, 2015 at 8:53

answered Jun 10, 2015 at 12:10

marcel

3,1471 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

theringostarrs Over a year ago

So I made the changes you described by adding an app.js and also modified require('./test1')in test2.js to use 'test1' instead to be consistent with your example, now I get an error when bundling: 'Cannot find module 'test2' from '..\Project\js'. Any thoughts?

theringostarrs Over a year ago

All I've changed is the line var test1 = require('./test1'); in test1 to var test1 = require('test1'); as your example uses that convention. I've added your app.js as is, and use your command line command.

marcel Over a year ago

sry, my fault. it should be ./test2 and ./test1. It is important to use a relative paths. if not, browserify thinks that it is a node module.

marcel Over a year ago

RECOMMEND: One of browserifys benefits are transpilers like babelify. You can use it to be able to write es6-syntax. babelify transforms es6 to es5 syntax. 1. npm install babelify --save-dev 2. change above command: browserify -t babelify js/app.js -o js/bundle.js -d

Collectives™ on Stack Overflow

Browserify: runtime in browser 'Cannot find module...' error

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related