browserify-shim not finding module

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 )