我已经使用vue cli设置了一个基本的VueJS项目。
npm install @vue/cli -g
vue create my-app
vue add vuetify
npm install keycloak-js --save在我的main.js文件中，我有以下内容：
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')当我尝试启动此应用程序时，Keycloak适配器无法正确导入。
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我假设我有一个坏的webpack配置的地方，但我不知道什么需要改变。
我已经研究了webpack imported module is not a constructor，但是我没有在任何地方显式地定义webpack配置。
有趣的是，将以下代码直接放在HTML head中，而不是在main.js中使用导入，可以解决这个问题：
<script src="https://cdn.jsdelivr.net/npm/keycloak-js@7.0.0/dist/keycloak.min.js"></script>
3条答案
按热度按时间zd287kbt1#
更新：正如尼克所说（谢谢尼克！）：在Keycloak的后续版本中也修复了此问题
因此，如果任何人仍然有这个问题，一个简单的npm更新应该可以修复它，将适配器更新到最新版本。
此版本（7.0.x）似乎存在一个未决问题
如果您不介意使用旧版本（6.0.1），可以重新安装适配器：
af7jpaap2#
如果你使用的是较新的keycloak-js适配器，这可能会有所帮助：
“我设法用Vue 3 Vite实现了keycloak-js适配器21.0.1，没有任何第三方库。如果您正确输入了keycloak配置，您应该能够通过将URI传递到输入字段来执行对后端的GET请求，登录/退出kecloak并查看您端的一些详细信息-user这是一个用于创建keycloak示例并将其传递到App. vue的现成解决方案。您的keycloak服务器上应该已经存在具有给定角色的领域、客户端和用户。为了执行一个GET请求到您的后端应用程序，在keycloak登录后。使用spring security 6 cors和csrf也应该正确配置。”
https://github.com/JMaratkanov/Vue-vite_with_Keycloak_21.0.1_noThirdPartyLibs
jm81lzqq3#
我通过更改