Vue-Router ESLinter入れたらエラーになる

前提・実現したいこと

もともと動いていたVueアプリをWebpackでコンパイルするように書き直したところ、Vue-Routerでエラーが出てしまい動かなくなってしまいました。
どうしたら動くようになるのかが全然わからず、自分では解決できないので質問させていただきます。

Package.json

json
1{
2  "name": "client-app",
3  "version": "1.0.0",
4  "description": "A Vue.js project",
5  "author": "",
6  "private": true,
7  "scripts": {
8    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
9    "start": "npm run dev",
10    "unit": "jest --config test/unit/jest.conf.js --coverage",
11    "test": "npm run unit",
12    "lint": "eslint --ext .js,.vue src test/unit",
13    "build": "node build/build.js"
14  },
15  "dependencies": {
16    "axios": "^0.21.1",
17    "vue": "^2.5.2",
18    "vue-global-events": "^1.2.1",
19    "vue-router": "^3.5.2",
20    "vuex": "^3.6.2"
21  },
22  "devDependencies": {
23    "@mdi/font": "^5.9.55",
24    "aspnet-webpack": "^3.0.0",
25    "autoprefixer": "^7.1.2",
26    "babel-core": "^6.22.1",
27    "babel-eslint": "^8.2.1",
28    "babel-helper-vue-jsx-merge-props": "^2.0.3",
29    "babel-jest": "^21.0.2",
30    "babel-loader": "^7.1.1",
31    "babel-plugin-dynamic-import-node": "^1.2.0",
32    "babel-plugin-syntax-jsx": "^6.18.0",
33    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
34    "babel-plugin-transform-runtime": "^6.22.0",
35    "babel-plugin-transform-vue-jsx": "^3.5.0",
36    "babel-preset-env": "^1.3.2",
37    "babel-preset-stage-2": "^6.22.0",
38    "chalk": "^2.0.1",
39    "copy-webpack-plugin": "^4.0.1",
40    "css-loader": "^0.28.0",
41    "eslint": "^4.15.0",
42    "eslint-config-standard": "^10.2.1",
43    "eslint-friendly-formatter": "^3.0.0",
44    "eslint-loader": "^1.7.1",
45    "eslint-plugin-import": "^2.7.0",
46    "eslint-plugin-node": "^5.2.0",
47    "eslint-plugin-promise": "^3.4.0",
48    "eslint-plugin-standard": "^3.0.1",
49    "eslint-plugin-vue": "^4.0.0",
50    "extract-text-webpack-plugin": "^3.0.0",
51    "file-loader": "^1.1.4",
52    "friendly-errors-webpack-plugin": "^1.6.1",
53    "html-webpack-plugin": "^2.30.1",
54    "jest": "^22.0.4",
55    "jest-serializer-vue": "^0.3.0",
56    "node-notifier": "^5.1.2",
57    "optimize-css-assets-webpack-plugin": "^3.2.0",
58    "ora": "^1.2.0",
59    "portfinder": "^1.0.13",
60    "postcss-import": "^11.0.0",
61    "postcss-loader": "^2.0.8",
62    "postcss-url": "^7.2.1",
63    "rimraf": "^2.6.0",
64    "sass": "^1.20.1",
65    "sass-loader": "^7.1.0",
66    "semver": "^5.3.0",
67    "shelljs": "^0.7.6",
68    "uglifyjs-webpack-plugin": "^1.1.1",
69    "url-loader": "^0.5.8",
70    "vue-jest": "^1.0.2",
71    "vue-loader": "^13.3.0",
72    "vue-style-loader": "^3.0.1",
73    "vue-template-compiler": "^2.5.2",
74    "vuetify": "^2.5.3",
75    "vuetify-loader": "^1.7.2",
76    "webpack": "^3.6.0",
77    "webpack-bundle-analyzer": "^2.9.0",
78    "webpack-dev-server": "^2.9.1",
79    "webpack-merge": "^4.1.0"
80  },
81  "engines": {
82    "node": ">= 6.0.0",
83    "npm": ">= 3.0.0"
84  },
85  "browserslist": [
86    "> 1%",
87    "last 2 versions",
88    "not ie <= 8"
89  ]
90}
91

発生している問題・エラーメッセージ

ESLintの方でのエラー

terminal
1
2 WARNING  Compiled with 2 warnings                                                                 19:10:14
3 warning  in ./src/plugins/router.js
4
56:8-17 "export 'VueRouter' was not found in 'vue-router'
6
7 warning  in ./src/plugins/router.js
8
98:17-23 "export 'Router' was not found in 'vue-router'

ブラウザに表示されるエラー

console
1vue.esm.js?efeb:5129 Uncaught TypeError: Cannot read property 'install' of undefined
2    at Function.Vue.use (vue.esm.js?efeb:5129)
3    at eval (router.js?f6df:6)
4    at Object../src/plugins/router.js (app.js:1996)
5    at __webpack_require__ (app.js:679)
6    at fn (app.js:89)
7    at eval (main.js?1c90:1)
8    at Object../src/main.js (app.js:1868)
9    at __webpack_require__ (app.js:679)
10    at fn (app.js:89)
11    at Object.0 (app.js:2069)

該当のソースコード

js
1// src/pligins/router.js
2
3import Vue from 'vue';
4// ここを怒られてる…
5import {Router, VueRouter} from 'vue-router';
6import routers from '@/router';
7
8Vue.use(VueRouter);
9
10const router = new Router({
11  mode: 'history',
12  routes: routers
13});
14
15export default router;

試したこと

実際にVue-Routerのファイルの中をのぞいたのですが、Routerはexportされておらず、似たようなのでexportされていたのは、Routeという名のインターフェースでした。

js
1// node_modules/vur-router/types/index.d.ts
2
3import './vue'
4import { VueRouter } from './router'
5
6export default VueRouter
7
8export {
9  RouterMode,
10  RouteMeta,
11  RawLocation,
12  RedirectOption,
13  RouterOptions,
14  RouteConfig,
15  RouteRecord,
16  RouteRecordPublic,
17  Location,
18  Route,
19  NavigationGuard,
20  NavigationGuardNext,
21  NavigationFailureType,
22  NavigationFailure
23} from './router'

行動規範の内容に同意します

回答1件

自己解決

インスタンスの問題でした。

js
1// src/pligins/router.js
2
3import Vue from 'vue';
4// ここを怒られてる…
5// import {Router, VueRouter} from 'vue-router';
6import VueRouter from 'vue-router';
7import routers from '@/router';
8
9Vue.use(VueRouter);
10
11// const router = new Router({
12const router = new VueRouter({
13  mode: 'history',
14  routes: routers
15});
16
17export default router;