Question

我正在尝试使用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='...'行，仍会抛出错误。它让我相信：答：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"
}

我被卡住了，因为这导致整个应用无法加载＆amp;我不知道从哪里开始调试。任何见解都会令人惊叹！

Answer 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'] } } ] }

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

Firebase Web导入未定义

1 个答案: