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

Question

我正在使用 ReactJS、Webpack、Babel 和 Firebase 构建应用程序。

当我运行 webpack 使用 babel 加载器捆绑我的代码时，我看到以下内容在许多其他行中被打印出来：

[BABEL] Note: The code generator has deoptimised the styling of "/Users/.../myproject/node_modules/firebase/lib/firebase-web.js" as it exceeds the max of "100KB".

然后，当我尝试在我的应用程序中使用 require('firebase')，然后在浏览器中使用运行时...浏览器在控制台中打印出以下内容。

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 是我的行：

var Firebase = require('firebase');

有人知道我尝试加载我的应用程序时出现此错误的原因吗？我不确定这个错误是否开始是因为我从在 Webpack 中使用 jsx-loader 切换到 babel，或者因为我运行 'npm update' 并且我正在使用的其中一个软件包的新版本正在中断东西。

Answer 1

似乎有你的答案：Webpack + Firebase: Disable parsing of Firebase

Babel 添加 "use strict" 导致 this 未定义。

解决方案是为 firebase 禁用 babel-loader，如链接答案中所述：

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

Answer 2

如果您在使用 webpack 的 ionic 3 上遇到这个 Firebase 问题，请将其添加到默认 webpack.config.js:

  {
    test: /\.js$/,
    loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER,
    exclude: /node_modules/  // <-- add this 
  }

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

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

reactjs

firebase

webpack

babeljs

webpack-dev-server