webpack angular - module is not a function

Question

Trying to get up and running with webpack for angularjs. Trying to setup different angular modules for each folder within /webpack & then inject them into my main app module definition. What am I doing wrong?

Running into this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module webpack due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":[],"_configBlocks":[],"_runBlocks":[],"requires":[],"name":"photocropper"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object

entrypoint:

var angular = require('angular');
ngModule = angular.module('webpack', [
    require('./webpack/photocrop/client')
])

./webpack/photocrop/client/index.js

var angular = require('angular');
module.exports =  angular.module('photocropper', [])

Answer 1

Remember that you need to pass module name not module in the dependency

ngModule = angular.module('webpack', [
    require('./webpack/photocrop/client') //this is an object
])

You can simply require the file and just inject by name like this:

var firstModule = require('./webpack/photocrop/client')

ngModule = angular.module('webpack', [
    'firstModule' // this should work
])

firstModule(ngModule)

Answer 2

I had the same problem and in my case it got solved by changing the assigment in:

var angular = require('angular');

To simply:

require('angular');

The reason is that this assigment is creating a new "angular" variable which is different than the one provided by Angular itself, hence, it doesn't have the 'module' property