vue cliでnpmのプラグインのインポート方法がわかりません｡

Question

前提

この記事を参考にvue cliを使い､このnpmのプラグインをインポートしようとしましたができませんでした｡

該当のソースコード

import leader from 'leader-line'
console.log(leader)

コンソールの結果は以下の通り空でした｡

main.js?fbea:13 Object[[Prototype]]: Object

package.jsにはそのプラグインはインストールされています｡

  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "leader-line": "^1.0.7", // インストールされている
    "vue-template-compiler": "^2.6.14"
  },

試したこと

app.vueからimportして読み込もうと思いましたが､できませんでした｡

<template>
  <div id="search-ip">
    <div>
      <div>
        <input @click="getIp" type="button" value="IPを取得" />

        <div id="start">start</div>
        <div id="end">end</div>
      </div>
    </div>
  </div>
</template>

<script>
import LeaderLine from 'leader';

export default {
  name: "SearchIp",
  methods: {
    getIp() {
      this.axios
        .get("https://httpbin.org/get")
        .then((response) => {
          alert(response.data.origin);
        })
        .catch((e) => {
          alert(e);
        });
    },
  },
  mounted: function () {
    new LeaderLine(
      document.getElementById("start"),
      document.getElementById("end"),
    );
  },
};
</script>

エラー文

vue.runtime.esm.js?c320:4560 [Vue warn]: Error in mounted hook: "TypeError: leader_line__WEBPACK_IMPORTED_MODULE_0___default(...) is not a constructor"

found in

---> <SearchIp> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?c320:4560
logError @ vue.runtime.esm.js?c320:3016
globalHandleError @ vue.runtime.esm.js?c320:3012
handleError @ vue.runtime.esm.js?c320:2979
invokeWithErrorHandling @ vue.runtime.esm.js?c320:2995
callHook$1 @ vue.runtime.esm.js?c320:3987
insert @ vue.runtime.esm.js?c320:4378
invokeInsertHook @ vue.runtime.esm.js?c320:6883
patch @ vue.runtime.esm.js?c320:7094
Vue._update @ vue.runtime.esm.js?c320:3726
updateComponent @ vue.runtime.esm.js?c320:3831
Watcher.get @ vue.runtime.esm.js?c320:3407
Watcher @ vue.runtime.esm.js?c320:3397
mountComponent @ vue.runtime.esm.js?c320:3848
Vue.$mount @ vue.runtime.esm.js?c320:8704
eval @ main.js?fbea:17
./src/main.js @ app.js:75
__webpack_require__ @ app.js:104
(anonymous) @ app.js:1249
__webpack_require__.O @ app.js:158
(anonymous) @ app.js:1250
(anonymous) @ app.js:1252
vue.runtime.esm.js?c320:3020 TypeError: leader_line__WEBPACK_IMPORTED_MODULE_0___default(...) is not a constructor
    at VueComponent.mounted (App.vue?11c4:32:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?c320:2988:1)
    at callHook$1 (vue.runtime.esm.js?c320:3987:1)
    at Object.insert (vue.runtime.esm.js?c320:4378:1)
    at invokeInsertHook (vue.runtime.esm.js?c320:6883:1)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?c320:7094:1)
    at Vue._update (vue.runtime.esm.js?c320:3726:1)
    at Vue.updateComponent (vue.runtime.esm.js?c320:3831:1)
    at Watcher.get (vue.runtime.esm.js?c320:3407:1)
    at new Watcher (vue.runtime.esm.js?c320:3397:1)

以下の記事を見つけましたが､vue3用でした｡
https://reffect.co.jp/vue/vue-plugin

ドキュメントのプラグインのページを見ましたが､npmでインストールしたものの導入方法はわかりませんでした｡
https://jp.vuejs.org/v2/guide/plugins.html

以下の記事を参考にvue.useは必要ないと判断しました｡
https://qiita.com/fuqda/items/90073e3cd0987c82553d

ここにより詳細な情報を記載してください。

"vue": "^2.6.14",
"@vue/cli-service": "~5.0.0",

Comments

[nulll]

axiosで試したところapp.vueにimportしただけで､うまくいきました｡
なぜこのプラグインでは失敗するのでしょうか｡

```App.vue
<template>
<div id="search-ip">
<div>
<div>

<div id="start">start</div>
<div id="end">end</div>
</div>
</div>
</div>
</template>

<script>
import axios from 'axios'

export default {
name: "SearchIp",
methods: {
},
mounted: function () {
// new LeaderLine(
// document.getElementById("start"),
// document.getElementById("end"),
// );
console.log(axios)
const url = axios.get("http://localhost:8080/")
console.log(url)
},
};
</script>

```

```出力
romise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data: "<!DOCTYPE html>\n<html lang=\"\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n <link rel=\"icon\" href=\"/favicon.ico\">\n <title>hello</title>\n <script defer src=\"/js/chunk-vendors.js\"></script><script defer src=\"/js/app.js\"></script></head>\n <body>\n <noscript>\n <strong>We're sorry but hello doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>\n </noscript>\n <div id=\"app\"></div>\n <!-- built files will be auto injected -->\n </body>\n</html>\n"
headers: {accept-ranges: 'bytes', content-length: '621', content-type: 'text/html; charset=utf-8', date: 'Wed, 10 Aug 2022 06:42:55 GMT', etag: 'W/"26d-obr8Oyd4+jyFUq1IlZmxjp1STvA"', …}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: "OK"
[[Prototype]]: Object
```

[nulll]

githubからそれっぽい記事を見つけました､追って結果を報告します｡
https://github.com/anseki/leader-line/issues/242