Browserify Cannot find module when trying to bundle many js files

Question

This is my first day doing node, I'm having some problems trying to bundle some js files.

MyFolder
|-- app (folder)   
|  |-- Collections (contains: movies.js)   
|  |-- Models (contains: movie.js)  
|  |-- node_modules  
|-- main.js  
|-- node_modules (folder)    
|-- static (folder)  

This is the content of js files I want to compress into static/bundle.js.

 // app/models/movie.js  
 var Backbone = require("backbone");
 var Movie = Backbone.Model.extend({
   defaults: {
     title: "default",
     year: 0,
     description: "empty",
     selected: false
   }
 });
 module.exports = Movie;

 // app/collections/movies.js  
 var Backbone = require("backbone");
 var Movie = require('models/movie');
 var Movies = Backbone.Collection.extend({
      model: Movie
 });
 module.exports = Movies;

When I run browserify -r ./app/main:app > static/bundle.js the file bundle.js is created with the scripts from app/main.js. It works as expected.

But when I run browserify -r ./app/collections/movies.js:movies \ -r ./app/models/movie.js:movie > static/bundle.js, it creates an empty bundle.js and shows this:

Error: Cannot find module '/Users/MyFolder/app/models/movie.js:movie' from '/Users/MyFolder'  

My folder app/node_modules is sync with ln -sf ../models . and ln -sf ../collections .

Question 1: Any hint what I'm doing wrong?
Question 2: If static/bundle.js exists. Does running browserify again overwrites the file or not? On my local tests it doesn't overwrite, so am I supposed to delete this file each time for update?

Solution 1

Might consider adding ./ to your path:

var Movie = require('./models/movie');

see: How to use browserify to bundle a backbone app?

Solution 2

For people coming from search engines:

It might be that you are using a mac and you have not used proper case while requiring the file.

This is equivalent in mac:

require('./someFile');
require('./somefile'); 

But not in centOs for example.

Solution 3

If you use your debugger and step into the require call you'll find yourself inside some minified code (typically).

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require== ...

Go to your console and inspect t[o][1]

This will show you a list of the correct paths for your modules.

Object {
    '<module name>' : <id>
    ...
}

If this becomes too confusing temporarily un-minify the first line in your compiled bundle.js file (I use alt-cmd-l in PhpStorm) and try again.

Comments

[Sam A. Horvath-Hunt]

Thank you for this. This is why importing a package with a wrong capital letter was working on my OS X dev machine but not on my Linux server.

[Mohammad Kermani]

Yep! that solved my problem, I used Bable to convert my ES6 program and I thought it will do that

[Timtim]

Spending half an hour through the web to finally find the correct answer to my issue... Real thanks mate.