ReferenceError: Cannot access 'UserContext' before initialization - React
Asked Answered
B

3

11

I am trying to create a UserContext to be accessible to all class components in the React app. I am receiving the following error.

ReferenceError: Cannot access 'UserContext' before initialization

App.js

import React, { createContext } from 'react';
export const UserContext = createContext(null);
function App() {
  return (

    <div className="App">
      <UserContext.Provider value={null}>
        <PageRoutes />
      </UserContext.Provider>
    </div>

  );
}

export default App;

LoginPage.js

import React, { Component } from 'react';
import { UserContext } from './App';

class MasterLoginPage extends Component {
    static contextType = UserContext;
    constructor(props) {
        super(props);
        this.state = {
            username: null,
            loggedIn: false
        }

// logic to work with username, password authentication

  render() {

    return (
        <div>
            // logic for rendering login page
          {
            this.state.loggedIn &&
            <UserContext.Provider value={this.state.username} />
          }
        </div>
  }
}

MasterLoginPage.contextType = UserContext;

export default MasterLoginPage;

PageRoutes.js

import React from 'react';

export default () => (
<BrowserRouter>
    <Switch>
      <Route exact path="/login" component={LoginPage} />
      <Route exact path="/home" component={Home}/>
    </Switch>
</BrowserRouter>
);

Home.js

import React from 'react';

export default class Home extends React.Component {
  // I want to put this user in a state variable in this component  
}
  1. Why am I getting reference error as I have already defined it in App.js ?
  2. If I have to store the userContext value in a state variable in some other class component say Home.js then how do I do that ?
Bless answered 8/10, 2020 at 5:45 Comment(4)
Thats not how you access Context values, you need to use Consumer, please read the docsGarzon
That's the second part. Please can you follow on the first question. Why is there an initialization error ? Without that I won't be able to use the Provider and Consumer. @DennisVashBless
I think its related to code that you don't show, please see how to make a reproducible example, better make a sandbox, How to create a Minimal, Reproducible ExampleGarzon
I'm having the same exact issue even after following the docs. reactjs.org/docs/context.html#classcontexttypeAthletics
T
2

That error seems to be caused by a circular dependency. What I did to solve that error was to create the Context outside the Provider file. Try to do this:

UserContext.js

import React from 'react';
export const UserContext = React.createContext();

LoginPage.js

static contextType = UserContext;

or

MasterLoginPage.contextType = UserContext;

not both.

The only thing you need to do is to import UserContext.js

Towpath answered 6/3, 2021 at 16:13 Comment(0)
L
1

Call the UserContext within the render block. Let me know if that works

Leung answered 13/10, 2020 at 19:37 Comment(0)
G
0

I would recommend to create a component to wrap the routes directly as:

WithUser.jsx

import React, { createContext } from 'react';
const UserContext = createContext(null);

export default (props) => {
    <UserContext.Provider value={null}>
        { props.children }
    </UserContext.Provider>
};    

then on:

PageRoutes.jsx

import React from 'react';

export default () => (
    <BrowserRouter>
        <Switch>
            <WithUser>
                <Route exact path="/login" component={LoginPage} />
                <Route exact path="/home" component={Home}/>
            </WithUser>
        </Switch>
    </BrowserRouter>
);

in case you want to make available the Context for both routes, if not, just wrap the one you want to use it.

Goodhen answered 23/2, 2021 at 0:22 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.