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 配置。

有趣的是，将以下内容直接放入我的 HTML 头部而不是使用 main.js 中的导入解决了问题：

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

Answer 1

更新：正如 Nick 所说（谢谢 Nick！）：这在 Keycloak 的更高版本中也已修复

因此，如果有人仍然遇到这个问题，一个简单的 npm 更新应该可以解决它，将适配器更新到最新版本。

~~看起来这个版本 (7.0.x) 有一个未解决的问题~~

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

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

Answer 2

我通过更改

解决了这个问题

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

to

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

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

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

javascript

webpack

vue.js

keycloak

vue-cli-3