I'm trying to make a Keycloak integration with Gatsby.
I'd love to use environment variables for the Keycloak configuration so that I can properly containerize the application. I'm facing an issue about gatsby-browser.js that doesn't get environment variables.
Here's my gatsby-browser.js:
import React from 'react'
import { node } from 'prop-types'
import Keycloak from 'keycloak-js'
import { KeycloakProvider } from '@react-keycloak/web'
import { Spinner } from 'design-react-kit'
require('dotenv').config({
path: `.env.development`
})
const keycloak = new Keycloak({
realm: process.env.KEYCLOAK_REALM,
url: process.env.KEYCLOAK_AUTH_URL,
clientId: process.env.KEYCLOAK_AUTH_CLIENT_ID
})
const Loading = () => {
return (
<div className="container">
<Spinner
active
double
small={false}
tag="span"
/>
</div>
)
}
const wrapRootElement = ({ element }) => {
return (
<KeycloakProvider
keycloak={keycloak}
initConfig={{
promiseType: 'native',
onLoad: 'check-sso',
silentCheckSsoRedirectUri:
window.location.origin + '/silent-check-sso.xhtml'
}}
LoadingComponent={<Loading />}
>
{element}
</KeycloakProvider>
)
}
wrapRootElement.propTypes = {
element: node
}
const _wrapRootElement = wrapRootElement
export { _wrapRootElement as wrapRootElement }
When I launch gatsby develop
I get:
Generating development JavaScript bundle failed
Can't resolve 'fs' in '/home/gbiagini/Documents/work/appaltinnovativi/swg-service/node_modules/dotenv/lib'
If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local file make sure that the path is correct.
File: node_modules/dotenv/lib/main.js
failed Building development bundle - 13.100s
I don't get why the fs
package should be an issue considering that I do the exact same process on gatsby-config.js and works flawlessly.