WEBPACK_IMPORTED_MODULE_4_firebase___default.a.syncState is not a function

componentWillMount() {
  this.ref = firebase.syncState('/', {
    context: this,
    state: 'message'
  })
}

import React, { Component } from 'react'
import Formulaire from './Formulaire'
import Message from './Message';
import '../chatbox.css'
import firebase from '../FireBase'

export default class Chat extends Component {

 state = {
    messages: {}
  }

  componentWillMount() {
    this.ref = firebase.syncState('/', {
      context: this,
      state: 'message'
    })
  }

  addMessage = message => {
    //Copier le state
    const messages = {...this.state.messages}
    //Ajouter le message avec une clé timestamp
    const timestamp = Date.now()
    messages[`message-${timestamp}`] = message
    //mettre à jour le state
    this.setState({ messages })
  }

  render() {

    const messages = Object
      .keys(this.state.messages)
      .map(key => <Message key ={key} details= .
 {this.state.messages[key]} />)


    return (
      <div className="box">
        <div>
          <div className='messages'>
            {messages}
           </div>
           <Formulaire
             addMessage={this.addMessage}
             pseudo={this.props.match.params.pseudo}
             length="140"
            />
        </div>
      </div>
    )
 }
}