盖茨比构建失败，密钥斗篷 (@react-keycloak/web)

Question

我正在使用 Gatsby 构建静态站点和用于身份验证的 keycloak。我正在使用这些库：keycloak-js 和 @react-keycloak/web 在开发 (gatsby develop) 期间，一切运行都很好，auth 工作等等...

但是当我运行 gatsby build 时，它特别失败并出现此错误：

WebpackError: authClient has not been assigned to ReactKeycloakProvider

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

盖茨比-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

这是 gatsby 文档的建议：https://www.gatsbyjs.com/docs/debugging-html-builds/

我尝试过但没有奏效的方法

保护我的 gatsby-browser.js 代码并将其包装在 if (typeof window !== 'undefined') {}
仅当 window 存在时才返回 ReactKeycloakProvider，否则 {element}
使用 React.lazy 加载这些库
按照文档的建议使用 @loadable-components
在 gatsby-browser.js 文件中使用普通的 js require 和 es6 import
直接在 wrapRootElement 组件中导入库
尝试删除 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 完全不同的问题（服务器 returns 与客户端不同的东西）。

我不应该使用 @react-keycloak/web 并编写我自己的上下文和提供程序吗？但我的意思是模块工作正常，除了在 gatsby 构建期间。

Answer 1

你试过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 加载程序，而不是一个，只是为了检查。

Answer 2

大声笑显然我所要做的就是将这段代码添加到 gatsby-ssr.js

盖茨比-ssr.js

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

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

exports.wrapRootElement = wrapRootElement

所以最后我没有使用任何特殊的东西（任何装载机或其他）。

盖茨比-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

盖茨比构建失败，密钥斗篷 (@react-keycloak/web)

Gatsby build fails with keycloak (@react-keycloak/web)

javascript

reactjs

keycloak

gatsby

盖茨比-browser.js

我尝试过但没有奏效的方法

盖茨比-ssr.js

盖茨比-browser.js