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

【问题标题】：Webpack Imported Module is not a Constructor in VueJS when Importing KeycloakWebpack 导入的模块在导入 Keycloak 时不是 VueJS 中的构造函数
【发布时间】：2020-01-26 20:44:36
【问题描述】：

我已经使用 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/keycloak-js@7.0.0/dist/keycloak.min.js"></script>

【问题讨论】：

标签： javascript vue.js webpack keycloak vue-cli-3

【解决方案1】：

更新：正如尼克所说（谢谢尼克！）：这在 Keycloak 的后续版本中也得到了修复

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

~~此版本 (7.0.x) 似乎存在未解决的问题~~

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

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

【讨论】：

这在更高版本的 Keycloak 中也得到了修复。

【解决方案2】：

我通过更改解决了这个问题

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

to

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

【讨论】：