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 导入的模块不是构造函数，但我没有在任何地方明确定义 webpack 配置。

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

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

Answer 1

更新：正如尼克所说（谢谢尼克：）：这在更高版本的 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');