TypeError: Object (...) не является функцией при экспорте страницы

Question

Я новичок в Reactjs и в настоящее время следую этому уроку (https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/#react-firebase-protected-routes) об аутентификации с помощьюact и firebase, но на этом этапе появилась странная ошибка.

TypeError: Object(...) is not a function
Module../src/containers/Autenticacao/Conta/index.jsx
src/containers/Autenticacao/Conta/index.jsx:17
  14 | 
  15 | const condition = authUser => !!authUser;
  16 | 
> 17 | export default withAuthorization(condition)(AccountPage);

I'mне знаю, в чем причина, потому что я не получил ошибку в терминале, просто доступ к странице.

Вот как выглядит весь код:

import React from 'react';

import { PasswordForgetForm } from '../PasswordForget';
import PasswordChangeForm from '../PasswordChange';
import { withAuthorization } from '../Session';

const AccountPage = () => (
  <div>
    <h1>Account Page</h1>
    <PasswordForgetForm />
    <PasswordChangeForm />
  </div>
);

const condition = authUser => !!authUser;

export default withAuthorization(condition)(AccountPage);

Я думал, что это может быть что-то не так вфункция «withAuthorization», но я уже использую ее для экспорта другой страницы.

Вот файл «withAuthorization» для поддержки:

import React from 'react';
import { withRouter } from 'react-router-dom';
import { compose } from 'recompose';
import AuthUserContext from './context';
import { withFirebase } from 'context';
import * as ROUTES from 'routes/portfolio';

const withAuthorization = condition => Component => {
  class WithAuthorization extends React.Component {
    componentDidMount() {
      this.listener = this.props.firebase.auth.onAuthStateChanged(
        authUser => {
          if (!condition(authUser)) {
            this.props.history.push(ROUTES.SIGN_IN);
          }
        },
      );
    }

    componentWillUnmount() {
      this.listener();
    }

    render() {
      return (
          <AuthUserContext.Consumer>
           {authUser =>
             condition(authUser) ? <Component {...this.props} /> : null
           }
         </AuthUserContext.Consumer>
      );
    }
  }

  return compose(
    withRouter,
    withFirebase,
  )(WithAuthorization);
};

export default withAuthorization;

Answer 1

withAuthorization экспортируется как модуль по умолчанию, вы должны сделать:

import withAuthorization from '../Session'

вместо:

import { withAuthorization } from '../Session'