Gatsby构建失败的keycloak (@react-keycloak/web)

Question

我正在使用盖茨比建立静态网站和键盘斗篷为auth。我正在使用这些库：keycloak-js和@react-keycloak/web在开发期间(盖茨比开发)，一切运行良好，工作和所有的.

但是，当我运行gatsby build时，它特别失败了，因为这个错误：

WebpackError: authClient has not been assigned to ReactKeycloakProvider

这是我使用的@react keycloak/web的react，错误来自useKeycloak.ts文件。

gatsby-browser.js

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 (
    <ReactKeycloakProvider 
      authClient={kc}
      initOptions={initOptions}
      LoadingComponent={<div>Loading...</div>}
    >
      {element}
    </ReactKeycloakProvider>
  )
}

exports.wrapRootElement = wrapRootElement

这就是盖茨比博士的建议：https://www.gatsbyjs.com/docs/debugging-html-builds/

我试过但没有成功的东西

• 保护我的gatsby-browser.js代码并将其包装在if (typeof window !== 'undefined') {}中
• 只有在窗口存在时才返回ReactKeycloakProvider，否则{element}
• 使用React.lazy加载那些库
• 使用该@loadable-components作为文档建议
• 在gatsby-browser.js文件中使用常见的js require和es6导入
• 直接在wrapRootElement组件中导入libs
• 尝试删除node_modules、.cache、public并重新安装

在gatsby-node.js中也尝试过这种方法。

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [          
          {
            test: /@react-keycloak\/web/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

我正在使用版本：

"@react-keycloak/web": "^3.4.0",
"gatsby": "^3.0.1",
"keycloak-js": "^12.0.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",

我都不知道该怎么做了，太烦人了。我甚至尝试了下一个js，但是keycloak遇到了完全不同的问题(服务器从客户端返回不同的内容)。

我不应该使用@react-keycloak/web来编写自己的上下文和提供程序吗？但我的意思是，除了在盖茨比构建过程中，模块还能正常工作。

Answer 1

显然，我所要做的就是将这段代码添加到gatsby-ssr.js中。

gatsby-ssr.js

const React = require('react')
const { ReactKeycloakProvider } = require('@react-keycloak/web')

function wrapRootElement ({ element }) {
  return (
    <ReactKeycloakProvider authClient={{}}>
      {element}
    </ReactKeycloakProvider>
  )
}

exports.wrapRootElement = wrapRootElement

因此，最终我不必使用任何特殊的东西(任何加载程序或其他什么)。

gatsby-browser.js

const React = require('react')
const Keycloak = require('keycloak-js')

const { ReactKeycloakProvider } = require('@react-keycloak/web')

const kc = Keycloak({
  url: 'http://localhost:8080/auth',
  realm: 'test',
  clientId: 'test-web',
})

const initOptions = {
  onLoad: 'check-sso',
  silentCheckSsoRedirectUri: window.origin + '/silent-check-sso.html',
}

function wrapRootElement ({ element }) {
  return (
    <ReactKeycloakProvider 
      authClient={kc}
      initOptions={initOptions}
      LoadingComponent={<div>Loading...</div>}
    >
      {element}
    </ReactKeycloakProvider>
  )
}

exports.wrapRootElement = wrapRootElement

Answer 2

你试过loadable-components了吗？好像是SSR的事。

const React = require('react')
const Keycloak = require('keycloak-js')
const Keycloak = loadable(() => require('keycloak-js'))
const {ReactKeycloakProvider} = loadable(() => 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 (
    <ReactKeycloakProvider 
      authClient={kc}
      initOptions={initOptions}
      LoadingComponent={<div>Loading...</div>}
    >
      {element}
    </ReactKeycloakProvider>
  )
}

exports.wrapRootElement = wrapRootElement

请注意，您还可以尝试向两个依赖项而不是一个依赖项中添加null加载程序，以进行检查。