npm run buildができない

Question

前提・実現したいこと

プログラミング初心者です。うまく質問できないですがよろしくお願いします。
vue.jsのnpm run buildをしたいです。
エラー内容のTo install it, you can run: npm install --save @/pages/HomePageを試したのですが、またエラーが出てつまずいています。vscodeのデバックを使ったらSyntaxError: Unexpected identifierがでましたが、どこが原因かわからない状況です。教えていただきたいです。

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

(base) MacBook-Air:frontend imaijoma$ npm run build

> frontend@0.1.0 build /Users/imaijoma/drf-vue-sample/frontend
> vue-cli-service build


⠸  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                                                                  16:34:31

This dependency was not found:

* @/pages/HomePage in ./src/router.js

To install it, you can run: npm install --save @/pages/HomePage
 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/imaijoma/.npm/_logs/2019-10-20T07_34_31_801Z-debug.log

(base) MacBook-Air:frontend imaijoma$ npm install --save @/pages/HomePage
npm ERR! code ENOLOCAL
npm ERR! Could not install from "@/pages/HomePage" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/imaijoma/.npm/_logs/2019-10-20T07_33_53_671Z-debug.log

/usr/local/bin/node --inspect-brk=9507 frontend/src/router.js 
Debugger listening on ws://127.0.0.1:9507/588806de-5fda-4bd5-8a18-4c4f3d28c985
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Waiting for the debugger to disconnect...
/Users/imaijoma/drf-vue-sample/frontend/src/router.js:1
import Vue from 'vue'
       ^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:872:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:999:10)

該当のソースコード

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomePage from '@/pages/HomePage'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: HomePage },
        { path: '*', redirect: '/' }
    ]
})

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

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

Answer 1

router オブジェクトを作ってインポートするだけでは不十分で、Vueのコンポーネントへ渡す必要があります。

src/index.js の中で

import router from ‘./router’

new Vue({
  router, /* 直接渡す */
  /* dataなどの他の値 */
})

のように　直接渡してあげる必要があります。

https://router.vuejs.org/ja/guide/#javascript

Answer 2

■ 追記
コメント欄でソースの全文について聞いて、下記の対応を提示。 エラーは回避できたとのこと。

router.js の最後に追加

export default router

main.js の import store from './store' の次の行に追加

import './router'

・
・
・

---

■ 最初の回答

src/pages/HomePage.vue というファイルがあるとして、、
拡張子を指定していないからでは？

import HomePage from '@/pages/HomePage'

↓

import HomePage from '@/pages/HomePage.vue'

Comments

[jomaboy]

回答ありがとうございます。
指定してみたのですが、変わらずです、、

[tanishi_a]

src/pages/HomePage.vue は存在するのですか？

[jomaboy]

はい、存在します！

[tanishi_a]

vue が入っていなかったり・・？
npm install vue
(すみませんこれ 回答じゃなくて質問の欄でやるべきでしたね・・)

[jomaboy]

インストールしてみましたが、、、
```
(base) MacBook-Air:frontend imaijoma$ npm install vue
npm WARN bootstrap@4.3.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.

+ vue@2.6.10
updated 1 package and audited 24240 packages in 12.059s
found 0 vulnerabilities

(base) MacBook-Air:frontend imaijoma$ npm install --save @/pages/HomePage
npm ERR! code ENOLOCAL
npm ERR! Could not install from "@/pages/HomePage" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/imaijoma/.npm/_logs/2019-10-20T11_46_12_563Z-debug.log
```

[tanishi_a]

全部のソースを載せることは可能ですか？

[jomaboy]

https://github.com/smtjma/drf-vue-sample

[jomaboy]

お願いします！

[tanishi_a]

main.js の 9行目あたりに 下記を足したら、npm run build 自体は出来るようには なりましたが。

import './router'

[jomaboy]

import './router'いれたらこうなりました????

(base) MacBook-Air:frontend imaijoma$ npm run build

> frontend@0.1.0 build /Users/imaijoma/drf-vue-sample/frontend
> vue-cli-service build

⠸ Building for production...

ERROR Failed to compile with 1 errors 21:34:01

error in ./src/router.js

Module Error (from ./node_modules/thread-loader/dist/cjs.js):

/Users/imaijoma/drf-vue-sample/frontend/src/router.js
7:7 error 'router' is assigned a value but never used no-unused-vars

✖ 1 problem (1 error, 0 warnings)

@ ./src/main.js 7:0-30 11:0-18 18:10-16
@ multi ./src/main.js

ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/imaijoma/.npm/_logs/2019-10-20T12_34_02_086Z-debug.log

[tanishi_a]

そしたら、手元のソースと 上げてもらったソースは違うものだと思います。
比較してみてください。

[jomaboy]

確認しましたが一緒です????

[tanishi_a]

router.js の最後に
export default router

main.js の import store from './store' の次の行に
import './router'

ではどうでしょう。

[jomaboy]

できましたーーーー！????
何日もできず、辛かったので夜遅いのに本当にありがとうございました。
なぜ直ったのかの理解は微妙ですが、とりあえず先に進められそうです

[tanishi_a]

進んだようで良かったです。

一応補足すると、
・ main.js の下の方で router を import していないのに使っていたので、import した
・ router.js は、export default で、import した先のファイルで読めるようにしてる
です。

[jomaboy]

もともとmain.jsにimport router from './router'を書いているのですがこれではrouterをimportできていないのでしょうか？

[tanishi_a]

すみません。返信を見落としてました。
import するには export もセットで必要、というような理解です。