Webpack导入的模块在导入Keycloak时不是VueJS中的构造函数

Question

我已经使用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头中，而不是在main.js中使用导入解决了问题：

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/keycloak.min.js"></script>

Answer 1

我有同样的问题，该版本（7.0.x）似乎有一个未解决的问题https://issues.jboss.org/browse/KEYCLOAK-11565?jql=text%20~%20%22vue%22

如果您不介意使用旧版本（6.0.1），则可以重新安装适配器：

npm uninstall keycloak-js
npm i [email protected]