Firebase Web 导入未定义答案

【问题标题】：Firebase Web import is undefinedFirebase Web 导入未定义
【发布时间】：2016-03-22 01:29:34
【问题描述】：

我正在尝试使用 re-base 连接到使用 React 的 Firebase 应用。

这是我的 React 组件的样子：

import React from 'react';
import Firebase from 'firebase';
const base = new Firebase('https://my-firebase-app.firebaseio.com');

export default class Home extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: {}
    };
  }

  componentDidMount() {
    this.ref = base.syncState('coffees', {
      context: this,
      asArray: true,
      state: 'coffees',
      then: () => {
        console.log('finished base.syncState')
      }
    });
    ...
  }

  componentWillUnmount(){
    base.removeBinding(this.ref);
  }

  render() {
    ...
  }
}

我的问题是，当我的应用程序被构建时，我在 Firebase API 中得到'n' is undefined，靠近这些行：

};function Fa() {
        return Math.floor(2147483648 * Math.random()).toString(36) + Math.abs(Math.floor(2147483648 * Math.random()) ^ ja()).toString(36);
    };var w;a: {
        var Ga = n.navigator;if (Ga) {
            var Ha = Ga.userAgent;if (Ha) {
                w = Ha;break a;
            }
        }w = "";
    };function Ia() {

即使我注释掉const base='...' 行，仍然会抛出错误。这让我相信： A：Firebase API 文件有问题 B: Babel/Webpack 正在破坏它不应该的东西。但是，我尝试将 webpack 中的 Babel 加载器设置为 compact: false，但无济于事。

最后，看看我的 package.json：

"dependencies": {
  "react": "^0.14.7",
  "react-dom": "^0.14.7",
  "react-router": "^2.0.1"
},
"devDependencies": {
  "babel-core": "^6.7.2",
  "babel-loader": "^6.2.4",
  "babel-preset-es2015": "^6.6.0",
  "babel-preset-react": "^6.5.0",
  "eslint": "^2.4.0",
  "eslint-plugin-react": "^4.2.3",
  "html-webpack-plugin": "^2.10.0",
  "re-base": "^1.5.1",
  "webpack": "^1.12.14",
  "webpack-dev-server": "^1.14.1"
}

我被卡住了，因为这会导致整个应用程序加载失败并且我不知道从哪里开始调试。任何见解都会令人惊叹！

【问题讨论】：

跨帖：groups.google.com/forum/#!topic/firebase-talk/vPztQKZQHC0

标签： reactjs firebase webpack babeljs

【解决方案1】：

我的一个问题是我的 webpack 配置（我没有发布）。

我正在使用babel-loader 插件。我将exclude 选项设置为'/node_modules'。解决方案是删除引号，所以babel-loader 现在看起来像这样：

module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, // note the absence of ' ' loader: 'babel-loader', query: { presets: ['react', 'es2015'] } } ] }

正确设置此值解决了我的问题。

【讨论】：