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" ] }
回答1件
あなたの回答
tips
プレビュー