browserify-shim not finding module - browserify

Question

Given the following:
main.js
var angular = require('angular');
package.json
{
"main": "./main.js",
"browser": {
"angular": "./vendor/angular/angular.js"
},
"browserify-shim": {
"angular": "angular"
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"browserify-shim": "~3.2.0"
}
}
When running:
browserify . -d -o bundle.js
A bundle is successfully created and the output from the browserify-shim diagnostics is:
{
file: 'D:\\development\\js\\browserify\\main.js',
info:
{
package_json: 'D:\\development\\js\\browserify\\package.json',
packageDir: 'D:\\development\\js\\browserify',
shim: undefined,
exposeGlobals:
{},
browser:
{
angular: './vendor/angular/angular.js'
},
'browserify-shim':
{
angular: 'angular'
},
dependencies:
{
'browserify-shim': '~3.2.0'
},
lookedUp: false
},
messages: ['Found "angular" in browser field referencing "./vendor/angular/angular.js" and resolved it to "D:\\development\\js\\browserify\\vendor\\angular\\angular.js"',
{
resolved:
{
'D:\\development\\js\\browserify\\vendor\\angular\\angular.js':
{
exports: 'angular',
depends: undefined
}
}
}]
}
{
file: 'D:\\development\\js\\browserify\\vendor\\angular\\angular.js',
info:
{
package_json: 'D:\\development\\js\\browserify\\package.json',
packageDir: 'D:\\development\\js\\browserify\\',
shim:
{
exports: 'angular',
depends: undefined
},
exposeGlobals:
{},
browser:
{
angular: './vendor/angular/angular.js'
},
'browserify-shim':
{
angular: 'angular'
},
dependencies:
{
'browserify-shim': '~3.2.0'
},
lookedUp: false
},
messages: ['Found "angular" in browser field referencing "./vendor/angular/angular.js" and resolved it to "D:\\development\\js\\browserify\\vendor\\angular\\angular.js"',
{
resolved:
{
'D:\\development\\js\\browserify\\vendor\\angular\\angular.js':
{
exports: 'angular',
depends: undefined
}
}
}]
}
If package.json is changed to this (removing the browser section):
{
"main": "./main.js",
"browserify-shim": {
"./vendor/angular/angular.js": "angular"
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"browserify-shim": "~3.2.0"
}
}
I get the following error:
Error: module "angular" not found from "D:\\development\\js\\browserify\\main.js"
With the output from browserify-shim diagnostics as:
{
file: 'D:\\development\\js\\browserify\\main.js',
info:
{
package_json: 'D:\\development\\js\\browserify\\package.json',
packageDir: 'D:\\development\\js\\browserify',
shim: undefined,
exposeGlobals:
{},
browser: undefined,
'browserify-shim':
{
'./vendor/angular/angular.js': 'angular'
},
dependencies:
{
'browserify-shim': '~3.2.0'
},
lookedUp: false
},
messages: ['Resolved "./vendor/angular/angular.js" found in package.json to "D:\\development\\js\\browserify\\vendor\\angular\\angular.js"',
{
resolved:
{
'D:\\development\\js\\browserify\\vendor\\angular\\angular.js':
{
exports: 'angular',
depends: undefined
}
}
}]
}
{
[Error: module "angular"
not found from "D:\\development\\js\\browserify\\main.js"
]
filename: 'angular',
parent: 'D:\\development\\js\\browserify\\main.js'
}
I was under the impression that the browser section was for configuring aliases and that the two different package.json files above should be equivalent.
Have I misunderstood?

Answer 1

From the author:
If you don't alias ./vendor/angular/angular.js to angular via the browser field, browserify doesn't know where to find it.
So if you omit the browser field alias please do:
var angular = require('./vendor/angular/angular.js');
( assuming that ./vendor/angular/angular.js is relative to where you are requiring it from )