Webpack + Firebase: Disable parsing of Firebase

Question

I am working on a web app that uses Webpack to bundle modules. For whatever reason, the introduction of Firebase into the app is causing Webpack to throw an error. This error is occurring when Webpack attempts to load the Firebase module.

How do I go about excluding Firebase from Webpack, but can still call

import Firebase from 'firebase';

from within my JS files?

Here are some screenshots of the error.

pic1 pic2

Answer 1

tl;dr Exclude /node_modules/ from the babel-loader paths.

---

Your 2nd pic shows the error on firebase-web.js:12:

Uncaught TypeError: Cannot read property 'navigator' of undefined

Unfortunately, firebase-web.js is minified, so it's hard to tell exactly what's going wrong. Let's beautify firebase-web.js using http://jsbeautifier.org:

Now it's plain to see that the script is trying to access aa.navigator, but aa is undefined. You can see at the top of the file:

var h, aa = this;

We can see what the script is trying to do now: it expects this === window so it can access window.navigator.

But why is this undefined? It's because, at some point, the script is being put into strict mode, which causes this === undefined instead of this === window. We can see that in the webpack-generated main.js:

It turns out that the "use strict" is being prepended by babel-loader, so we should be able to disable babel-loader for firebase-web.js to solve the problem:

...
module: {
  loaders: [
    {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}
  ]
}
...

Good, now there's no more "use strict" and the error no longer occurs!

(Full disclosure: I worked on the same project that @kashiB is working on and have access to the source code.)