React - 当我尝试导入“firebase/app”时出现 Firebase 模块错误

Question

我目前正在处理一个小型反应项目，我遇到了一些与 'firebase' 模块相关的错误。

当我尝试导入 firebase 模块时，出现以下错误：

找不到模块：无法解析“C:project_name\node_modules\re-base\dist”中的“firebase/app”

这是我项目的依赖项：

"dependencies": {
    "firebase": "^5.5.1",
    "prop-types": "^15.6.2",
    "re-base": "^4.0.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
    "react-transition-group": "^2.5.0"
},

这是 firebase 配置文件 (./utils/firebase.js)：

import Rebase from 're-base';
import * as firebase from '@firebase/app';
import '@firebase/database';
import firebaseConfig from '../constants/database';


const firebaseApp = firebase.initializeApp( firebaseConfig );
const base = Rebase.createClass(firebase.database());

export { firebaseApp };
export default base;

然后，当我尝试将 firebaseApp 导入 App 组件时，我收到此错误。

import React, { Component } from 'react';
import './App.css';
import Form from './components/Form';
import Message from './components/Message';

// Firebase
import firebaseAppfrom './utils/firebase';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: {}
    }
  }

  componentDidMount() {
    base.syncState('/', {
      context: this,
      state: 'messages'
    });
  }
}

提前感谢您的帮助。

Answer 1

你在这里使用了一些非常古老的东西。我强烈建议按照documentation for adding Firebase using a module bundler 中的说明进行操作。

你的依赖应该是：

"firebase": "8.0.2",

或任何最新版本。你现在的那个已经很老了。

你的导入应该是：

import firebase from "firebase/app";
import "firebase/database";

不要在模块名称中使用@。