我不知道为什么我收到以下错误“错误：元素类型无效：”

我对 React 很陌生，甚至对 Firebase 也很陌生。我正在学习 Robin Wieruch 关于在 Firebase 中使用 React 的教程。显然，我做错了一些事情，但它让我望而却步。我正在使用一种使用文件夹命名我的组件的模式，每个组件文件夹中都有一个 index.js 文件来保存代码。

这是 App 组件的 index.js：

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import * as ROUTES from '../../constants/routes'

import Navigation from '../Navigation'
import LandingPage from '../Landing'
import SignUpPage from '../SignUp'
import SignInPage from '../SignIn'
import PasswordForgetPage from '../PasswordForget'
import HomePage from '../Home'
import AccountPage from '../Account'
import AdminPage from '../Admin'

const App = () => (
  <Router>
    <Navigation />

    <hr />

    <Route exact path={ROUTES.LANDING} component={LandingPage} />
    <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
    <Route path={ROUTES.SIGN_IN} component={SignInPage} />
    <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
    <Route path={ROUTES.HOME} component={HomePage} />
    <Route path={ROUTES.ACCOUNT} component={AccountPage} />
    <Route path={ROUTES.ADMIN} component={AdminPage} />
  </Router>
)

export default App

这是 SignUp 组件的 index.js 文件

import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'
import { compose } from 'recompose'

import FirebaseContext, { withFirebase } from '../Firebase'
import * as ROUTES from '../../constants/routes'

const SignUpPage = () => (
  <div>
    <h1>SignUp</h1>
    <FirebaseContext.Consumer>
      { firebase => <SignUpForm firebase={firebase} />}
    </FirebaseContext.Consumer>
  </div>
)

...

export default SignUpPage

export { SignUpForm, SignUpLink }

我不确定任何其他文件是否会有所帮助。

我道歉。好像忘记了最重要的文件。这是来自 src 文件夹的 index.js：

import React from 'react'
import ReactDOM from 'react-dom'

import './index.css'
import * as serviceWorker from './serviceWorker'

import App from './components/App'
import Firebase, { FirebaseContext } from './components/Firebase'

ReactDOM.render(
    // make Firebase Context available to the app
    <FirebaseContext.Provider value={ new Firebase() }>
      <App />
    </FirebaseContext.Provider>, 
    document.getElementById('root'),
  )

错误出现在此文件 ReactDOM.render 的第 12 行。

根据@Victor 的请求，以下是 Firebase 组件：

来自 Firebase 文件夹的 index.js

import FirebaseContext, { withFirebase } from './context'
import Firebase from './firebase'

export default Firebase

export { FirebaseContext, withFirebase }

来自 Firebase 文件夹的 context.js

import React from 'react'

const FirebaseContext = React.createContext(null)

// create the HOC withFirebase
export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    { firebase => <Component { ...props } firebase={ firebase } />}
  </FirebaseContext.Consumer>
)

export default FirebaseContext

Firebase 文件夹中的 firebase.js

import app from 'firebase/app'
import 'firebase/auth'
// import 'firebase/database'

// the constant value when the environment = 'production'
const prodConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_SENDER_ID,
}

// the constant value when the environment !== 'production'
const devConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_SENDER_ID,
}

// set the config constant to the appropriate value
const config = process.env.NODE_ENV === 'production' ? prodConfig : devConfig

class Firebase {
  constructor() {
    // initialize the app with the Firebase config
    app.initializeApp(config)

    this.auth = app.auth()
  }

  // ***** Auth API ***** (use the offical Firebase endpoint)
  doCreateUserWithEmailAndPassword = ( email, password ) => this.auth.createUserWithEmailAndPassword( email, password )

  // ***** SignIn ***** (use the offical Firebase endpoint)
  doSignInWithEmailAndPassword = ( email, password ) => this.auth.SignInWithEmailAndPassword( email, password )

  // ***** SignIn ***** (use the offical Firebase endpoint)
  doSignInWithEmailAndPassword = ( email, password ) => this.auth.SignInWithEmailAndPassword( email, password )

  // ***** SignOut ***** (use the offical Firebase endpoint)
  doSignOut = ( email, password ) => this.auth.SignOut()

  // ***** Password Reset ***** (use the offical Firebase endpoint)
  doPasswordReset = email => this.auth.sendPasswordResetEmail( email )

  // ***** Password Update ***** (use the offical Firebase endpoint)
  doPasswordUpdate = password => this.auth.currentUser.updatePassword( password )
}

export default Firebase

希望这样做。