Firebase library for Node.js breaks when using the "babel" loader. Specifically: "Uncaught TypeError: Unable to read property" navigator "undefined"
I am creating an app with ReactJS, Webpack, Babel and Firebase.
When I run webpack to bundle my code using the babel loader, I see the following printed among many other lines:
[BABEL] Note. The code generator has de-optimized the style "/Users/.../myproject/ node_modules / firebase / lib / firebase-web.js" as it exceeds the maximum value of "100KB".
Then when I try and require ("firebase") in my application and then run it in the browser ... the browser outputs the following to 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 where I have the line:
var Firebase = require('firebase');
Does anyone know what is causing this error when I try to download the application? I'm not sure if this error was triggered because I switched from using jsx-loader in Webpack to babel, or because I was running an npm update and a new version of one of the packages I am using is breaking.
source to share
Your answer seems to be: Webpack + Firebase: Disable Firebase parsing
Babylon adds "use strict"
which calls this
as undefined.
The solution would be to disable the babel loader for firebase as described in the linked answer:
...
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}
]
}
...
source to share
If you get this Firebase issue on ionic 3 using webpack add it by default webpack.config.js :
{
test: /\.js$/,
loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER,
exclude: /node_modules/ // <-- add this
}
source to share