HelpMeStackOverflowMyOnlyHope HelpMeStackOverflowMyOnlyHope - 8 months ago 137
React JSX Question

Firebase library for Node.js breaks when using 'babel' loader. Specifically: "Uncaught TypeError: Cannot read property 'navigator' of undefined"

I'm building an app with ReactJS, Webpack, Babel, and Firebase.

When I run webpack to bundle my code using the babel loader, I see the following is printed out amongst many other lines:

[BABEL] Note: The code generator has deoptimised the styling of
as it exceeds the max of "100KB".

Then when I try and require('firebase') in my app, and then run it in the browser... the browser prints out the following in the console.

Uncaught TypeError: Cannot read property 'navigator' of undefined
(anonymous function) @ firebase-web.js:12
(anonymous function) @ firebase-web.js:262
__webpack_require__ @ bootstrap da2fff1ce4ea892319dc:19
aa @ PlayerStore.js:3
__webpack_require__ @ bootstrap da2fff1ce4ea892319dc:19
prop @ Player.js:19
__webpack_require__ @ bootstrap da2fff1ce4ea892319dc:19
(anonymous function) @ index.js:13
__webpack_require__ @ bootstrap da2fff1ce4ea892319dc:19
obj.__esModule.default @ bootstrap da2fff1ce4ea892319dc:39
(anonymous function) @ bootstrap da2fff1ce4ea892319dc:39

PlayerStore.js:3 is where I have the line:

var Firebase = require('firebase');

Does anyone know what is causing this error when I try and load my app? I'm not sure if this error started because I switched from using jsx-loader in Webpack to babel, or because I ran 'npm update' and the new version of one of the packages I'm using is breaking things.

Oli Oli

There seems to be your answer: Webpack + Firebase: Disable parsing of Firebase

Babel adds "use strict" which causes this to be undefined.

Solution would be to disable babel-loader for firebase, as described in the liked answer:

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