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

Posted 2023-02-22

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

【英文标题】：React Redux Firebase - You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

【发布时间】：2019-11-29 04:43:21

【问题描述】：

我正在测试 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"  />
          <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)

【参考方案1】：

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

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

Reference