Customizing the Keycloak.v2 React theme

Hi,
I’ve been trying to get started with customizing the React-based Keycloak.v2 theme but been getting stuck on all sorts of errors. When running npm run build, I get missing files errors, and when updating the packages, instead it seems like the snowpack version becomes incompatible.

Does anyone have tricks on how to get it running?

Thanks,
Pierre

1 Like

Do you mean the v2 account console? There’s an example of how to extend it here keycloak-quickstarts/extend-account-console at latest · keycloak/keycloak-quickstarts · GitHub

Hi! Thanks for your answer :slight_smile:
Yeah, I tried using that but can’t seem to get the JSX/TSX part to build. Do you know if there are any special flags or programs to have installed when building it (other than NodeJs+NPM)?

(Exact error after npm install + npm run build: Error: Cannot find module '...\node_modules\@babel\compat-data\data\corejs3-shipped-proposals')

Looks like an incompatibility with your node version.

I’m trying to come up with a better solution, but this fixes the problem:
npm update --depth 5 @babel/preset-env
npm update --depth 5 @babel/compat-data

1 Like

The “better solution” was to install a node version manager. If you downgrade nodejs and npm to 12.13.0 and 6.12.0 respectively, the problem goes away.

Here’s one issue that tripped me up. When I initially copied the Keycloak.v2 theme, I was getting it from the latest code in GitHub.

However I later realized I should be copying from the version that matches my version of KeyCloak. For example, if you’re using KeyCloak 17.0.1, you should copy the theme from 17.0.1. The older versions can be found here