This article contains troubleshooting for common errors related to piveau-hub-ui.
TypeError: Cannot read properties of undefined (reading 'BASE_PATH')#
This usually occurs because you just came from the migration of vue-cli to Vite for a user-facing web application. We use keycloak-js with silent check-sso configuration. To make silent check-sso work, your application needs to host a dedicated silent-check-sso HTML document (usually silent-check-sso.html). You must point to the right location to this HTML document when initializing keycloak. This location depends on BASE_PATH and how your built-tool handles static HTML documents. If you face this error, consider trying this:
- Ensure that BASE_PATH is defined in all environments. In Vite, you might want to shim process.env.BASE_PATH. Ensure that BASE_PATH points to '/' for OSC and '/data' for production envs. If your web application is not hosted on a path like /data, you may just use / instead
- Ensure that silent-check-sso.html is correctly bundled as a dedicated static asset in the dist directory when built. A common pitfall is that vue-cli uses the public directory and Vite the static directory. So if you migrated from one to the other, ensure to place silent-check-sso.html is in the right directory
TypeError: Cannot read properties of undefined (reading 'loginFn')#
That means that for some reason, keycloak-js failed to create a valid keycloak instance. Ensure that
- the version between keycloak client and server match
- a user-config.js file exists
your user-config.js/runtime-config is set up the right way, especially the keycloak endpoint
the Docker container actually applies runtimeconfig. If you migrated from vue-cli to vite, the directory structure of the dist directory changed that causes to break runtimeconfig. To fix this, check runtimeconfig.sh and if your Dockerfile has an actual runtimeconfig script.
- ensure that the pkceMethod is set up correctly to match your keycloak configuration. Either it is deactivated in both keycloak and piveu-ui or it is activated in both. The env variable for that is $VUE_APP_AUTHENTICATION_KEYCLOAK_INIT_PKCE_METHOD, The recommended security setting is to activate PKCE. The following screenshot shows the configuration of keycloak.