javascriptvue.jswebpackkeycloakvue-cli-3

Webpack Imported Module is not a Constructor in VueJS when Importing Keycloak


I have set up a basic VueJS project using the vue cli.

npm install @vue/cli -g
vue create my-app
vue add vuetify
npm install keycloak-js --save

In my main.js file I have the following:

import Vue from 'vue'
import App from '@/App.vue'
import vuetify from '@/plugins/vuetify'
import Keycloak from 'keycloak-js'

let adapter = new Keycloak({
  url: process.env.VUE_APP_KEYCLOAK_URL,
  realm: process.env.VUE_APP_KEYCLOAK_REALM,
  clientId: process.env.VUE_APP_KEYCLOAK_CLIENT_ID
})

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

When I attempt to launch this application the Keycloak adapter fails to import properly.

Uncaught TypeError: keycloak_js__WEBPACK_IMPORTED_MODULE_3___default.a is not a constructor
    at eval (main.js?c112:6)
    at Module../src/main.js (app.js:7083)
    at __webpack_require__ (app.js:727)
    at fn (app.js:101)
    at Object.1 (app.js:7109)
    at __webpack_require__ (app.js:727)
    at app.js:794
    at app.js:797

I am assuming I have a bad webpack configuration somewhere, but I'm not sure what needs to change.

I have looked at webpack imported module is not a constructor, but I am not explicitly defining a webpack configuration anywhere.

Interestingly putting the following in my HTML head directly instead of using the import in main.js resolves the issue:

    <script src="https://cdn.jsdelivr.net/npm/keycloak-js@7.0.0/dist/keycloak.min.js"></script>

Solution

  • UPDATE: As Nick said (Thank you Nick!): This was fixed in later versions of Keycloak as well

    So if anyone still has this issue, an simple npm update should fix it updating the adapter to the latest version.

    Looks like there is an open issue for this version (7.0.x)

    If you don't mind using the older version (6.0.1) you can reinstall the adapter:

    npm uninstall keycloak-js
    npm i keycloak-js@6.0.1