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

2.2k views Asked by At

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==
1

There are 1 answers

4
marcel On BEST ANSWER

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.