React Js: Cannot access context before initialization

Question

I'm trying to create a new architecture in my project using context and I started getting the following error:

[Uncaught ReferenceError: Cannot access 'ProviderContext' before initialization] : https://i.stack.imgur.com/0DFhP.png

This is my App.js:

import React, { Component } from 'react';
import ProviderManager from './Providers/ProviderManager';



export default class App extends Component {
  componentDidMount() {
    document.getElementById("root").classList.add("main");
  }

  render() {
    return (
      <ProviderManager />
    )
  }
}

This is my ProviderManager component:

import React, { Component } from "react";
import RequestService from "./RequestService";

export const { ProviderContext } = React.createContext({
    test: "test",
  }); 

export default class ProviderManager extends Component {
    constructor(props) {
        super(props)
        this.state = { 
            loading: true,
            text: "Test text"
        }
    }

    addService = (name = "", service = {}) => {
        this.setState({
            [name]: service
        })
    }

    componentDidMount() {
        this.setState({
            loading: false
        })
    }


    render() {
        return this.state.loading ?
        (
            <p>Loading</p>
        ) : 
        (
            <ProviderContext.Provider value={this.state}>
                <RequestService />
            </ProviderContext.Provider>
        )   
    }
}

And this is my RequestService component

import { Component } from "react";
import { ProviderContext } from "./ProviderManager";

export default class RequestService extends Component
{
    static contextType = ProviderContext;
    
    componentDidMount() {
        console.log(this.context)
    }


    render() {
        return <p>Request Service</p>
    }
}

Also, this is my package.js

{
  "name": "goldpocket-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.24.0",
    "chart.js": "^3.7.1",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.1",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "sass": "^1.49.7",
    "universal-cookie": "^4.0.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react": "^17.0.39",
    "eslint": "^8.9.0",
    "typescript": "^4.5.5"
  }
}

Can you help me find what the heck I am doing wrong?

Answer 1

I think the problem lies here:

export default class RequestService extends Component
{
    static contextType = ProviderContext;
    
    componentDidMount() {
        console.log(this.context)
    }


    render()enter code here {
        return <p>Request Service</p>
    }
}

Static declaration means that the variable cannot be used by other classes even if they inherit the class properties. Just removing the static property of contextType should make it work.