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

Question

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>

Gabriel Carraro · Accepted Answer · 2020-01-23T13:19:25.583

1

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

edited Jan 23 '20 at 13:19

answered Oct 02 '19 at 12:02

Gabriel Carraro

64
1
5

1

This was fixed in later versions of Keycloak as well. – Nick Jan 21 '20 at 17:58

score 0 · Answer 2 · answered Mar 03 '23 at 14:40

If you are using a newer keycloak-js adapter maybe this helps:

"I managed to implement keycloak-js adapter 21.0.1 with Vue 3 Vite, without any third party libraries Given you entered your keycloak configurations correctly, you should be able to perform GET-Requests to your backend by passing your URI into the inputfield, logging in/out with kecloak and seeing some details of your end-user This is a ready to use solution for creating an instance of keycloak and passing it to the App.vue. A realm, a client and an user with given roles should already exist on your keycloak server, in order to perform a GET-request to your backend application, after keycloak login. Using spring security 6 cors and csrf should be configured properly too."

https://github.com/JMaratkanov/Vue-vite_with_Keycloak_21.0.1_noThirdPartyLibs

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 08 '23 at 08:35

score -1 · Answer 3 · answered Jan 21 '20 at 17:54

-1

I fixed this by changing

import { S3 } from 'aws-sdk/clients/s3'

to

var S3 = require('aws-sdk/clients/s3');

answered Jan 21 '20 at 17:54

Dazzle

2,880
3
25
52

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

3 Answers3