导入Keycloak时，Webpack导入的模块在VueJS中不是构造函数 [英] Webpack Imported Module is not a Constructor in VueJS when Importing Keycloak

问题描述

我已经使用vue cli建立了一个基本的VueJS项目.

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

在我的main.js文件中，我具有以下内容:

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')

当我尝试启动此应用程序时，Keycloak适配器无法正确导入.

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

我假设我的某个Webpack配置不正确，但是我不确定需要更改什么.

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

我看过 webpack导入的模块不是构造函数 ，但我没有在任何地方明确定义webpack配置.

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

有趣的是，将以下内容直接放在HTML头中，而不是在main.js中使用导入即可解决此问题:

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>

推荐答案

更新:正如Nick所说的(谢谢Nick！):在更高版本的Keycloak中也已解决

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

因此，如果有人仍然遇到此问题，则只需进行简单的npm更新即可修复它，从而将适配器更新到最新版本.

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

该版本(7.0.x)似乎有一个未解决的问题

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

如果您不介意使用旧版本(6.0.1)，则可以重新安装适配器:

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

这篇关于导入Keycloak时，Webpack导入的模块在VueJS中不是构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！