React、AuthContextのコンパイルが上手くいかない

Question

現状

Providerとして振る舞いたいので、React.createContextフックを使用し、Contextオブジェクトを作成して、画面に描出したい。
exportされていないとエラーが出ているが、自分が確認した限りではexportはされている。
import部分の｛AuthProvider｝をAuthProviderに変えてエラーが消えたとの記事もあったが、逆にエラーになる。

自分が見つけられないエラーうや記述のミスがあれば、ご教授して頂きたいです。

エラー内容

コード

import React from 'react'
import SignUp from './pages/SignUp'
import Login from './pages/Login'
import ChatRoom from './pages/ChatRoom'
import LoggedInRoute from './LoggedInRoute'

import { AuthProvider } from './AuthService'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/signup" component={SignUp} />
          <LoggedInRoute path="/" component={ChatRoom} />
        </Switch>
      </Router>
    </AuthProvider>
  )
}

export default App

import React, { useState, useEffect } from 'react'
import firebase from './config/firebase'

const AuthContext = React.createContext()

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null)

  useEffect(() => {
    firebase.auth().onAuthStateChanged(user => {
      console.log(user)
      setUser(user)
    })
  }, []) //

  return (
    <AuthContext.Provider value={user}>{children}</AuthContext.Provider>
  )
}

export default { AuthContext, AuthProvider }

import React, { useContext } from 'react'
import { Route, Redirect } from 'react-router-dom'
import { AuthContext } from './AuthService'

const LoggedInRoute = ({ component: Component, ...rest }) => {
  const user = useContext(AuthContext)

  return (
    <Route
      {...rest}
      render={props =>
        user ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  )
}

export default LoggedInRoute

Answer 1

AuthContextとAuthProviderのexport部分をexport｛｝ではなく、export defaultにしていた。