reactjs - 使用 'babel' 加载程序时,Node.js 的 Firebase 库会中断。具体是: "Uncaught TypeError: Cannot read property ' navigator' of undefined"

标签 reactjs firebase webpack babeljs webpack-dev-server

我正在使用 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”而我正在使用的包之一的新版本破坏了东西。

最佳答案

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

Babel 添加了 "use strict" ,这会导致 this 未定义。

解决方案是禁用 firebase 的 babel-loader,如链接答案中所述:

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

关于reactjs - 使用 'babel' 加载程序时,Node.js 的 Firebase 库会中断。具体是: "Uncaught TypeError: Cannot read property ' navigator' of undefined",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31073032/

相关文章:

javascript - 从子组件 reactjs 运行函数

java - Android Studio 中的冲突依赖项

firebase - 如何从 Firebase 数据库中删除所有数据?

javascript - HTTP 无法识别正文

reactjs - 在 useEffect 中 react 取消订阅 RxJS 订阅

reactjs - 在 redux-form 中加载指示器

javascript - 如何在 HTML 中显示 Firebase 查询结果(未定义错误)

javascript - 如何在 Prod 中启动 Webpack 和装置

javascript - Webpack 自定义插件。使用 AST 在 React 组件中插入属性

angular - Internet Explorer 11,ECMAScript 对象属性分配问题