title: Gatsby build fails with keycloak (@react-keycloak/web)
body: <p>I am using Gatsby to build static site and keycloak for auth.
  I am using these libs: <code>keycloak-js</code> and <code>@react-keycloak/web</code>
  During development (gatsby develop) everything runs fine, auth works and all that...</p>
  <p>But when i run <code>gatsby build</code>, it fails specifically with this error:</p>
  <p><code>WebpackError: authClient has not been assigned to ReactKeycloakProvider</code></p>
  <p>This is the react keycloak lib that i am using <a href="https://github.com/react-keycloak/react-keycloak/tree/master/packages/web" rel="nofollow noreferrer">@react-keycloak/web</a> and error comes from <code>useKeycloak.ts</code> file.</p>
  <h3>gatsby-browser.js</h3>
  <pre><code>const React = require('react')
  const Keycloak = require('keycloak-js')
  const { ReactKeycloakProvider } = require('@react-keycloak/web') 
  
  const kc = Keycloak({
    url: 'xxx',
    realm: 'xxx',
    clientId: 'xxx',
  })
  
  const initOptions = {
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
  }
  
  function wrapRootElement ({ element }) {
    return (
      &lt;ReactKeycloakProvider 
        authClient={kc}
        initOptions={initOptions}
        LoadingComponent={&lt;div&gt;Loading...&lt;/div&gt;}
      &gt;
        {element}
      &lt;/ReactKeycloakProvider&gt;
    )
  }
  
  exports.wrapRootElement = wrapRootElement
  </code></pre>
  <p>This is what gatsby docs suggest: <a href="https://www.gatsbyjs.com/docs/debugging-html-builds/" rel="nofollow noreferrer">https://www.gatsbyjs.com/docs/debugging-html-builds/</a></p>
  <h3>What i tried and didn't work</h3>
  <ul>
  <li>Guarding my gatsby-browser.js code and wrapping it in <code>if (typeof window !== 'undefined') {}</code></li>
  <li>Returning ReactKeycloakProvider only if window exists, otherwise {element}</li>
  <li>Using <code>React.lazy</code> to load those libs</li>
  <li>Using that <code>@loadable-components</code> as docs suggest</li>
  <li>Using either common js require and es6 import in gatsby-browser.js file</li>
  <li>importing libs directly inside <code>wrapRootElement</code> component</li>
  <li>Tried deleting node_modules, .cache, public and installing all again</li>
  </ul>
  <p>Tried this in gatsby-node.js as well</p>
  <pre><code>exports.onCreateWebpackConfig = ({ stage, loaders, actions }) =&gt; {
    if (stage === &quot;build-html&quot; || stage === &quot;develop-html&quot;) {
      actions.setWebpackConfig({
        module: {
          rules: [          
            {
              test: /@react-keycloak\/web/,
              use: loaders.null(),
            },
          ],
        },
      })
    }
  }
  </code></pre>
  <p>I am using versions:</p>
  <pre><code>&quot;@react-keycloak/web&quot;: &quot;^3.4.0&quot;,
  &quot;gatsby&quot;: &quot;^3.0.1&quot;,
  &quot;keycloak-js&quot;: &quot;^12.0.4&quot;,
  &quot;react&quot;: &quot;^17.0.1&quot;,
  &quot;react-dom&quot;: &quot;^17.0.1&quot;,
  </code></pre>
  <p>I don't even know what to try anymore, it's so annoying. I even tried next js but i get totally different problems with keycloak (that server returns different stuff from the client).</p>
  <p>Should i just not use <code>@react-keycloak/web</code> and write my own context and provider? but i mean module is working fine except during the gatsby build.</p>