質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • Laravel 5

    2544questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Vue.js

    1322questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • npm

    368questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

laravel mixのエラーが解決できない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,596

segur

score 60

 はじめに

LaravelとVue.jsを利用してWebサイトを開発しようとしています。
エラーが出てにっちもさっちもいかなくなったので、質問します。

 動作環境

MacにCentOSの仮想環境を構築し、その中にLaravelのアプリケーションを作成しています。

 ホストマシン

  • macOS High Sierra 10.13.3
  • Oracle VirtualBox 5.1.26
  • vagrant 1.9.8

 ゲストマシン

  • CentOS release6.9
  • PHP 7.1.15
  • Composer 1.6.3
  • Laravel Framework 5.6.12
  • nvm 0.33.8
  • node 9.8.0
  • npm 5.6.0

 症状

こちらのサイトを参考に、似たようなサイトを作成しています。
https://qiita.com/acro5piano/items/f33381fc60408abe9865

php artisan serve --host 192.168.33.10:8000 

このコマンドでWebサーバーを起動することはできます。192.168.33.10というのはゲストマシンのIPアドレスです。
ブラウザでこのIPにアクセスしてみたところ、以下のようなエラーが発生しました。

ErrorException (E_ERROR)
The Mix manifest does not exist. (View: /home/vagrant/●●●●/resources/views/app.blade.php)

●●●●というのは伏字です。
このエラーを解決したいです。

 設定ファイル

package.jsonはこんな感じです。author等は省略しています。

{
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "axios": "~0.18.0",
    "bootstrap-sass": "~3.3.7",
    "cross-env": "~5.1.4",
    "jquery": "~3.3.1",
    "laravel-mix": "~2.1.11",
    "lodash": "~4.17.5",
    "vue": "~2.5.16",
    "vue-resource": "~1.5.0",
    "vue-router": "~3.0.1",
    "webpack": "~4.2.0"
  },
  "devDependencies": {
    "webpack-cli": "~2.0.12"
  }
}


色々な情報を参考にして構築したので、内容がおかしいかもしれません。
npmやlaravelに慣れていないため、どこがおかしいのかもよくわかっておりません。

 試したこと

mix manifest というのを生成するためには、npm run devを実行すれば良いという情報があり、実行してみたのですが、途中で止まってしまって、うまくいきません。

$ npm run dev
> ●●●●@1.0.0 dev /home/vagrant/●●●●/●●●●
> npm run development


> ●●●●@1.0.0 development /home/vagrant/●●●●/●●●●
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 8/10 modules 2 active ...les/vue-router/dist/vue-router.esm.jsTypeError: dep.getResourceIdentifier is not a function
    at addDependency (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:387:30)
    at iterationOfArrayCallback (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:78:3)
    at addDependenciesBlock (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:407:5)
    at Compilation.processModuleDependencies (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:418:4)
    at afterBuild (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:545:16)
    at _this.buildModule.err (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:591:11)
    at callback (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:342:35)
    at module.build.error (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/Compilation.js:378:12)
    at handleParseResult (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/NormalModule.js:363:12)
    at doBuild.err (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/NormalModule.js:385:6)
    at runLoaders (/home/vagrant/●●●●/●●●●/node_modules/webpack/lib/NormalModule.js:264:12)
    at /home/vagrant/●●●●/●●●●/node_modules/loader-runner/lib/LoaderRunner.js:370:3
    at iterateNormalLoaders (/home/vagrant/●●●●/●●●●/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
    at Array.<anonymous> (/home/vagrant/●●●●/●●●●/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
    at Storage.finished (/home/vagrant/●●●●/●●●●/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at provider (/home/vagrant/●●●●/●●●●/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
    at /home/vagrant/●●●●/●●●●/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:532:3)


この最後の行で止まってしまい、いくら待ってもその先に行きません。
npm installもうまく行っていないようで、以下のような警告がでます。

$ npm install
npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@1.12.2 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@2.11.2 requires a peer of webpack@^2.2.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.

up to date in 11.929s


ここに表示されているwebpack 3.1.0をインストールしても、npm run devはうまくいきませんでした。

どなたか解決できる方、いらっしゃいませんでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

新規プロジェクト作って最初からやり直したほうがいいです。
しなくていい余計なことをしている。

Vagrant使うならLaravel公式のHomestead
Vagrantで動かしてるならphp artisan serveも不要。

Laravel mixにwebpackは含まれてるので"webpack": "~4.2.0"は不要。
おそらく原因はこれでmixのwebpackは3なのに4を追加してるから。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/22 15:15

    Homesteadというのがあるんですね。情報ありがとうございます。試してみます。

    キャンセル

  • 2018/03/22 21:34

    教えていただいたHomesteadを利用したところ、解決しました。本当にありがとうございました。

    今後、この質問を見る人がいるかもしれませんので、やったことの詳細を書きます。

    まず、教えていただいた https://readouble.com/laravel/5.6/ja/homestead.html の手順通りにHomesteadの環境を構築しました。

    構築した仮想マシンの /home/vagrant/code にcomposer create-projectでlaravelのアプリを構築すると、確かにphp artisan serveなしでブラウザからアクセスできるようになりました。

    生成されたpackage.jsonに"vue-router":"^3.0.1"を追加して、npm installをしたところ、エラーなく無事にインストールできました。
    vue componentを整理したところ、npm run watchが通るようになり、ブラウザからもvueで書いたページが正常に閲覧できるようになりました。

    不慣れで色々と手間取ってしまいましたが、無事にLaravel+Vue.jsの環境が構築できました。
    ご回答ありがとうございました。

    キャンセル

同じタグがついた質問を見る

  • Laravel 5

    2544questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Vue.js

    1322questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • npm

    368questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。