title: Can't import context before initialization
body: <p>I'm trying to import my created context from my App.js, in a child component.</p>
  
  <p>App.js</p>
  
  <pre><code>export const FilterContext = React.createContext("test");
  
  export default class App extends React.Component {
      render() {
          return (
              &lt;div className="App"&gt;
                  &lt;Navigation /&gt;
                  &lt;Hero /&gt;
  
                  &lt;FilterContext.Provider value="hello"&gt;
                      &lt;OfferSorting /&gt;
  
                      &lt;div className="wrapper"&gt;
                          &lt;div className="container"&gt;
                              &lt;Offer /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;NewOfferButton /&gt;
                  &lt;/FilterContext.Provider&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Then I want to access my context in <code>&lt;OfferSorting /&gt;</code></p>
  
  <p>OfferSorting.js</p>
  
  <pre><code>import { FilterContext } from "../../../App";
  
  export default class OfferSorting extends React.Component {
      static contextType = FilterContext;
  
      constructor(props) {
          super(props);
      }
  
      componentDidMount() {
          console.log(this.context)
      }
  }
  </code></pre>
  
  <p>But in <code>OfferSorting.js</code> it will throw the error <code>Cannot access 'FilterContext' before initialization</code>. How can I access my context, and not use props?</p>