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

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

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

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

npm

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

【Vue.js】「npm run dev」時のエラーについて

ShojiroAbe
ShojiroAbe

総合スコア31

Vue.js

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

npm

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0リアクション

0クリップ

580閲覧

投稿2022/07/10 18:57

編集2022/07/11 01:08

Vueでアプリ制作の学習中の初学者のものです。
諸々を実装した後に、「npm run dev」にてローカルサーバーを立ち上げたところ
下記のエラーが出てしまい、ブラウザ上も真っ白になってしまいました…。

WARNING Compiled with 4 warnings warning in ./node_modules/vuex/dist/vuex.esm-browser.js 1077:9-14 "export 'watch' was not found in 'vue' warning in ./node_modules/vuex/dist/vuex.esm-browser.js 140:17-25 "export 'reactive' was not found in 'vue' warning in ./node_modules/vuex/dist/vuex.esm-browser.js 14:9-15 "export 'inject' was not found in 'vue' warning in ./node_modules/vuex/dist/vuex.esm-browser.js 345:2-7 "export 'watch' was not found in 'vue'

見た感じだと、vueの中に必要なモジュールが無い?という所感でした。
こちらに関して、調べたところ直接的な解決方法はありませんでしたが
恐らくパッケージのバージョンが違うのかな?ダウングレード?アップグレード?と思い確認したところ

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: vuex@4.0.2 npm ERR! Found: vue@2.6.14 npm ERR! node_modules/vue npm ERR! vue@"^2.5.2" from the root project npm ERR! peer vue@"2.x" from @vue/test-utils@1.0.0-beta.24 npm ERR! node_modules/@vue/test-utils npm ERR! dev @vue/test-utils@"^1.0.0-beta.24" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"^3.0.2" from vuex@4.0.2 npm ERR! node_modules/vuex npm ERR! vuex@"^4.0.2" from the root project npm ERR! npm ERR! Conflicting peer dependency: vue@3.2.37 npm ERR! node_modules/vue npm ERR! peer vue@"^3.0.2" from vuex@4.0.2 npm ERR! node_modules/vuex npm ERR! vuex@"^4.0.2" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/xxxxx/.npm/eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! /Users/xxxxx/.npm/_logs/2022-07-10T18_48_03_057Z-debug-0.log

と出ており
これ(バージョンの相違)によるのが根本的な原因?なのかなと思ったのですが
「vue」のバージョンが行ったり来たりしてる???と初学の自分が変に触ってこれ以上滅茶苦茶するのが怖くなったので
どうすれば解決できるのかご教授いただきたいです…。
大変恐れ入りますが、よろしくお願いいたします…!!

下記はpackage.jsonです。
参考になれば…!

{ "name": "xxxxxxxxxx", "version": "1.0.0", "description": "xxxxxxxxxx", "author": "xxxxxxxxxx", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", "build": "node build/build.js" }, "dependencies": { "axios": "^0.27.2", "es6-promise": "^4.2.8", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "^4.0.2" }, "devDependencies": { "@vue/test-utils": "^1.0.0-beta.24", "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", "babel-plugin-istanbul": "^4.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "body-parser": "^1.20.0", "chai": "^4.1.2", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "copy-webpack-plugin": "^4.0.1", "cross-env": "^5.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.7.1", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "inject-loader": "^3.0.0", "karma": "^1.4.1", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", "karma-phantomjs-launcher": "^1.0.2", "karma-phantomjs-shim": "^1.4.0", "karma-sinon-chai": "^1.3.1", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.31", "karma-webpack": "^2.0.2", "mocha": "^3.2.0", "nightwatch": "^0.9.12", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "phantomjs-prebuilt": "^2.1.14", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "sinon": "^4.0.0", "sinon-chai": "^2.8.0", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

hoshi-takanori

2022/07/10 20:51

package.json を貼ったら詳しい人が答えてくれるかも。
ShojiroAbe

2022/07/11 01:09

アドバイスありがとうございます!

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

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

npm

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。