title: React context from library not updating in consumer
body: <p>I originally followed <a href="https://github.com/the-road-to-react-with-firebase/react-gatsby-firebase-authentication" rel="nofollow noreferrer">this project</a> to add Firebase to a Gatsby React app. It involves making a Firebase context, wrapping a root layout with a provider, and then using a withFirebase HOC to wrap components with a Firebase consumer as needed. When I originally did it, it worked fine, but I wanted to move the code into a package I could reuse among my apps. Here's the HOC</p>
  <pre><code>export const withFirebase = (Component) =&gt; (props) =&gt; (
    &lt;FirebaseContext.Consumer&gt;
      {(firebase) =&gt; &lt;Component {...props} firebase={firebase} /&gt;}
    &lt;/FirebaseContext.Consumer&gt;
  );
  </code></pre>
  <p>And each page starts with a Layout component that renders this:</p>
  <pre><code>&lt;FirebaseContext.Provider value={this.state.firebase}&gt;
    &lt;AppWithAuthentication&gt;
      {this.props.children}
    &lt;/AppWithAuthentication&gt;
  &lt;/FirebaseContext.Provider&gt;
  </code></pre>
  <p><code>AppWithAuthentication</code> itself uses the <code>withFirebase</code> HOC as it needs Firebase to get the AuthUser (which is then stored in a context and passed down through a provider), and it's able to do so just fine.</p>
  <p>All the above happens in the package code itself, but when I imported my package into my other React project, trying to use <code>withFirebase</code> stops working as any components wrapped with it never receive the updated context. I confirm this by checking the Component tree in React Dev tools, the Firebase Provider gets the updated not-null value, and the consumer inside <code>AppWithAuthentication</code> gets it too. But the consumers inside my actual app don't update (and I have this same problem with the AuthUser context I made in the same library).</p>
  <p>I even thought that perhaps somehow the parent was rendering with the updated consumer but the children weren't re-rendering, but after counting the renders and logging them it was clear the components from my app were rendering more times than <code>AppWithAuthentication</code>. To make it a bit clearer, here's my component tree (starting from the Layout component at page root):<br />
  <a href="https://i.stack.imgur.com/Chy5M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Chy5M.png" alt="Component Tree" /></a></p>
  <p>Here's Provider showing a value:<br />
  <a href="https://i.stack.imgur.com/fQ3Wx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fQ3Wx.png" alt="Provider with value" /></a></p>
  <p>Here's <code>AppWithAuthentication</code>'s consumer showing a value:<br />
  <a href="https://i.stack.imgur.com/dJxer.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dJxer.png" alt="Consumer with value" /></a></p>
  <p>And here's the consumer from inside my application that <strong>doesn't</strong> have a value:<br />
  <a href="https://i.stack.imgur.com/Hqxpx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hqxpx.png" alt="Consumer without value" /></a></p>
  <p>I'm completely stuck here and would appreciate any insight.</p>
  <p>EDIT:
  After more testing I found some more information but I'm still stuck. It would seem that when reloading my page, the <code>Layout</code> component renders 2 times, the <code>Header</code> and <code>AppWithAuthentication</code> components each renders 4 times, and the Login component renders only 1 time. Is this why the consumers aren't updating? (But then why does the <code>Header</code> component not get any updates when its updating as much as <code>AppWithAuthentication</code>?)</p>
  <p>EDIT 2:
  After more research, I think this issue has something to do with webpack? I'm using Neutrino.js to make my component library, and I take the output of its build as the library. I found <a href="https://stackoverflow.com/questions/59641585/react-leaflet-custom-component-context-not-being-passed/60639968#60639968">this question</a> that seemed similar and tried implementing the fix like so in my <code>.neutrinorc.js</code>:</p>
  <pre><code>const reactComponents = require('@neutrinojs/react-components');
  
  module.exports = {
    use: [reactComponents(),
    (neutrino) =&gt; {
       neutrino.config.output.library(&quot;upe-react-components&quot;);
       neutrino.config.output.libraryTarget(&quot;umd&quot;);
       neutrino.config.mode(&quot;development&quot;);
      }],
  };
  </code></pre>
  <p>But it didn't fix the issue. Has anyone encountered issues with webpack breaking React context?</p>