v3.0.0-rc.1 angular.module is not a function when using webpack

[MikaAK]

I'm having troubles importing js-data-angular into my webpack project. Currently, my entry point is importing angular and js-data-angular. However when it gets to js-data-angular it throws angular.module is not a function.
All my other imports seem to work it's just js-data-angular! I found out when this line gets called the require result for angular is an empty object. Is there something I'm missing? I do have angular in my project and can use it fine without js-data-angular.

My app.js looks as follows:

import 'babel-core/polyfill'
import 'babel-core/external-helpers'
import 'json3'
import 'es5-shim'
import 'angular'
import 'angular-animate'
import 'ng-messages'
import 'angular-sanitize'
import 'angular-cookies'
import uiRouter from 'angular-ui-router'
import 'angular-bootstrap'
import 'angular-classy'
import 'angular-cookies'
import 'velocity'
import 'angular-velocity'
import 'js-data-angular'

[jmdobry]

I think I know what the problem is. It's a difficulty in the interop between ES6 imports, ES6 modules, CommonJS imports, and CommonJS modules. I think I have it fixed in 3.0.0-rc.1.

[jmdobry]

If you're using webpack or browserify (or something similar), change it to let jsDataModuleName = require('js-data-angular') and it should work.

[MikaAK]

@jmdobry Sorry, entirely my bad this is actually a report for 3.0.0-rc.1.

[jmdobry]

@MikaAK Here is a Webpack ES6 build example that works: https://github.com/js-data/js-data-angular/blob/3.0/build_examples/webpack_es6/app.js

And here is another one: https://github.com/js-data/js-data-angular/blob/3.0/build_examples/webpack_es6_2/app.js

What are you doing differently?

[MikaAK]

I'm not entirely sure what I could be doing wrong here @jmdobry. I've set up a basic test repo over here and I get the error when I run the steps in the readme.

[jmdobry]

@MikaAK I figured out the problem. You're using the bower-webpack plugin, which is designed to wrap bower libraries that are not already requireable via CommonJS, so it wraps each library in something like module.exports = the_lib. But, js-data.js and js-data-angular.js are already wrapped in the proper UMD definition so that they can be imported via require, import, etc. The bower-webpack-plugin's extra wrapper around js-data-angular.js messes up it's ability to detect and load angular.

I had to diff the bundle.js produced with bower-webpack-plugin and the bundle.js produced without it.

You have two fixes:

Recommended:

1. bower uninstall --save js-data-angular js-data angular
2. npm install --save [email protected]
3. webpack;

Alternative:

Find a way to exclude just the js-data and js-data-angular libs from the bower-webpack-plugin's search path, and let webpack find them naturally.

---

Closing because I’m not sure this is an issue, if you are convinced that this is really a bug, please feel free to re-open the issue and add more information:

• good - Your versions of Angular, JSData, etc, relevant console logs/error, code examples that revealed the issue
• better - A plnkr, fiddle, or bin that demonstrates the issue
• best - A Pull Request that fixes the issue, including test coverage for the issue and the fix

Otherwise support is done via the Gitter Channel or the mailing list.

[keyserfaty]

I encountered the same problem a while ago (i was getting a 'angular.* is not a function' [very cryptic error message btw]) and the problem was related to the bower components, just like @jmdobry suggested.

My solution, just in case anyone else had this same problem, was to get rid of every bower module that was already accessible via npm. That solved the issue.