React Redux Firebase - 您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

Question

我正在测试 react-redux-firebase 模块，并遵循更新后的文档：http://docs.react-redux-firebase.com/history/v3.0.0/docs/v3-migration-guide.html。我检查了我的导入是否正确，但我仍然收到此错误 “元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混合了设置默认和命名导入。”

我试图让我的 App 组件成为一个类组件和一个功能组件，并仔细检查了我的导入。

// package.json

{
  "name": "default-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "firebase": "^6.3.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "react-redux-firebase": "^2.3.0",
    "react-router-dom": "^4.4.0-beta.8",
    "react-scripts": "3.0.1",
    "recompose": "^0.30.0",
    "redux": "^4.0.4",
    "redux-firestore": "^0.8.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}




//src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux';
import { ReactReduxFirebaseProvider } from 'react-redux-firebase'
import createReduxStore from './store'

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

const fbConfig = {
    config options
}
const rrfConfig = { userProfile: 'users' } // react-redux-firebase config

// Initialize firebase instance
firebase.initializeApp(fbConfig)

const store = createReduxStore()

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  // createFirestoreInstance // <- needed if using firestore
}

ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
    <App />
</ReactReduxFirebaseProvider>
  </Provider>, 
document.getElementById('root'));erviceWorker.unregister();




//store/index.js

import { createStore } from 'redux'
import reducer from './reducers'

const initialState = {}

export default () => {
  return createStore(
    reducer,
    initialState,
    // applyMiddleware(...middleware) // to add other middleware
  )
}




//reducers/index.js

import { combineReducers } from 'redux'
import { firebaseReducer } from 'react-redux-firebase'
// import { firestoreReducer } from 'redux-firestore' // <- needed if using firestore

// Add firebase to reducers
export default combineReducers({
  firebase: firebaseReducer
  // firestore: firestoreReducer // <- needed if using firestore
})




//App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { connect } from 'react-redux'
import { compose } from 'recompose';
import PropTypes from 'prop-types'
import { firestoreConnect } from 'react-redux-firebase'

class App extends Component {
  constructor(){
    super();

    this.state = {
      todos:[]
    }
  }

  render(){
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }

}

export default compose(
  firestoreConnect(['orders']),
  connect((state) => ({
  todos: [1,2,3]
})))(App)

Answer 1

ReactReduxFirebaseProvider 仅在 v3.0.0 版本的 react-redux-firebase 中可用，但根据您的包 json，您仍然使用 v2.3。

"react-redux-firebase": "^2.3.0",

Reference