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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

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

npm

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

1回答

1122閲覧

Laravelを利用したアプリケーションの内容をnpm run devでブラウザに表示させようとしたが、表示されない

SanQ

総合スコア92

Vue.js

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

npm

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2021/06/11 05:54

#開発環境

ツールバージョン
Laravel8.24.0
nodev14.17.0
npm6.14.13

アプリ内のpackage.json

json

1{ 2 "private": true, 3 "scripts": { 4 "dev": "npm run development", 5 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 6 "watch": "npm run development -- --watch", 7 "watch-poll": "npm run watch -- --watch-poll", 8 "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js", 9 "prod": "npm run production", 10 "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 11 }, 12 "devDependencies": { 13 "@mdi/font": "^5.9.55", 14 "axios": "^0.21.1", 15 "bootstrap": "^4.6.0", 16 "cross-env": "^7.0.3", 17 "eslint": "^7.21.0", 18 "eslint-plugin-vue": "^7.7.0", 19 "jquery": "^3.2", 20 "laravel-mix": "^5.0.9", 21 "lodash": "^4.17.19", 22 "popper.js": "^1.12", 23 "resolve-url-loader": "^3.1.2", 24 "sass": "~1.32.5", 25 "sass-loader": "^8.0.0", 26 "vue": "^2.5.17", 27 "vue-template-compiler": "^2.6.10" 28 }, 29 "dependencies": { 30 "@vue/composition-api": "^1.0.0-rc.1", 31 "fabric": "^4.3.0", 32 "laravel-echo": "^1.10.0", 33 "laravel-echo-server": "^1.6.2", 34 "laravel-mix-alias": "^1.0.2", 35 "moment": "^2.29.1", 36 "please-wait": "0.0.5", 37 "prettier": "^2.2.1", 38 "skyway-js": "^3.1.0", 39 "socket.io-client": "^2.4.0", 40 "spinkit": "^2.0.1", 41 "voice-activity-detection": "0.0.5", 42 "vue-beautiful-chat": "^2.5.0", 43 "vue-cropper": "^0.5.6", 44 "vue-dragscroll": "^2.1.3", 45 "vue-head": "^2.2.0", 46 "vue-masonry": "^0.12.0", 47 "vue-router": "^3.5.1", 48 "vue-window-size": "^1.0.2", 49 "vuetify": "^2.3.10", 50 "vuex": "^3.6.0" 51 } 52}

#困っていること
npm run devを実行し、ブラウザでアプリケーションの表示を見ようとしたところ、ブラウザのコンソールにエラーが表示されるだけで、アプリの内容が一切表示されませんでした。また、上記のpackage.jsonのもと、

  1. npm installのみを実行
  2. package-lock.jsonを削除した状態でのnpm installを実行
  3. package-lock.jsonnode_modules/を削除した状態でnpm installを実行

の3パターンを試してみても解決しませんでした。
どうしたらブラウザにアプリケーションの内容が表示できるのか教えていただきたいです。

#エラー内容
ブラウザのコンソールに表示されたエラー内容は以下の通りです。

Uncaught TypeError: n.reactive is not a function option-api.js?b121:1 d option-api.js:1 s option-api.js:1 install option-api.js:1 use VueJS <anonymous> app.js:44 js app.js:5406 __webpack_require__ app.js:20 0 app.js:7706 __webpack_require__ app.js:20 <anonymous> app.js:84 <anonymous> app.js:87 option-api.js:1:280 d option-api.js:1 s option-api.js:1 install option-api.js:1 use VueJS <匿名> app.js:44 js app.js:5406 __webpack_require__ app.js:20 0 app.js:7706 __webpack_require__ app.js:20 <匿名> app.js:84 <匿名> app.js:87

エラー内容から、node_module/vue-window-size/option-api.js内にエラーが発生していることはわかったのですが、どう修正したらよいのかわかりませんでした。これはpackage.json内のvue-window-sizeのバージョンを変えれば解決することなのでしょうか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

githubのリモートリポジトリで管理していた過去のpackage-lock.jsonの情報をもとにnode_modules/を削除した後npm ciを実行したところ、npm run devでうまくアプリケーションの内容がブラウザへ表示できるようになりました。

投稿2021/06/11 11:30

SanQ

総合スコア92

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問