У меня возникли проблемы при развертывании приложения MEVN в Heroku. Я погуглил ошибку, но ничего не смог найти, пожалуйста, помогите мне, я новичок в вебпаке и Heroku. Я создал свой проект Vue, используя vue init webpack client, и мой сервер был внедрен в другую папку (сервер), поскольку Heroku нужны сценарии сборки, я объединил пакет. json файлы папки клиента и сервера и обновил свой package-lock. json файл после этого npm update. Но я все еще получаю эту ошибку:
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): >= 6.0.0
engines.npm (package.json): >= 3.0.0
Resolving node version >= 6.0.0...
Downloading and installing node 13.6.0...
Bootstrapping npm >= 3.0.0 (replacing 6.13.4)...
npm >= 3.0.0 installed
-----> Installing dependencies
Installing node modules (package.json + package-lock)
> chromedriver@2.46.0 install /tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/chromedriver
> node install.js
Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file: https://chromedriver.storage.googleapis.com/2.46/chromedriver_linux64.zip
Saving to file: /tmp/2.46/chromedriver/chromedriver_linux64.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 4704K...
Received 5277K total.
Extracting zip contents
Copying to target path /tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/chromedriver/lib/chromedriver
Fixing file permissions
Done. ChromeDriver binary available at /tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/chromedriver/lib/chromedriver/chromedriver
> fibers@4.0.2 install /tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/fibers
> node build.js || nodejs build.js
make: Entering directory '/tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/fibers/build'
CXX(target) Release/obj.target/fibers/src/fibers.o
CXX(target) Release/obj.target/fibers/src/coroutine.o
CC(target) Release/obj.target/fibers/src/libcoro/coro.o
SOLINK_MODULE(target) Release/obj.target/fibers.node
COPY Release/fibers.node
make: Leaving directory '/tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/fibers/build'
Installed in `/tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/fibers/bin/linux-x64-79-glibc/fibers.node`
> core-js@2.6.11 postinstall /tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
> nodemon@2.0.2 postinstall /tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
added 1669 packages from 1080 contributors and audited 13491 packages in 48.871s
29 packages are looking for funding
run `npm fund` for details
found 23 vulnerabilities (2 low, 8 moderate, 12 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> HeideParkTour@1.0.0 build /tmp/build_2fcae940471da78ab872bed7c7ce5e39
> node client/build/build.js
Hash: 1f676cbf14c73a4ac7d7
Version: webpack 3.12.0
Time: 44077ms
Asset Size Chunks Chunk Names
static/fonts/materialdesignicons-webfont.1618c77.ttf 808 kB [emitted] [big]
static/fonts/materialdesignicons-webfont.f81583f.eot 809 kB [emitted] [big]
static/fonts/materialdesignicons-webfont.927457e.woff2 269 kB [emitted] [big]
static/fonts/materialdesignicons-webfont.d6e3eba.woff 387 kB [emitted] [big]
static/img/HPTlogo.6c94a57.png 12.5 kB [emitted]
static/img/heide_park1.da1efef.jpg 242 kB [emitted]
static/img/heide_park2.b4ddd09.jpg 46.5 kB [emitted]
static/img/map.295e335.jpg 257 kB [emitted] [big]
static/js/vendor.9006eec36c308de31372.js 1.19 MB 0 [emitted] [big] vendor
static/js/app.63a04543eebdeaf1c83f.js 34.8 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.d1eaa4d455ed63d9598ae1f65cf611eb.css 740 kB 1 [emitted] [big] app
static/css/app.d1eaa4d455ed63d9598ae1f65cf611eb.css.map 1.08 MB [emitted]
static/js/vendor.9006eec36c308de31372.js.map 4.15 MB 0 [emitted] vendor
static/js/app.63a04543eebdeaf1c83f.js.map 89 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 800 bytes [emitted]
static/favicon.png 29.9 kB [emitted]
ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./client/src/views/HomePage.vue
Module not found: Error: Can't resolve '../components/homepage/welcomeInfo' in '/tmp/build_2fcae940471da78ab872bed7c7ce5e39/client/src/views'
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./client/src/views/HomePage.vue 17:0-61
@ ./client/src/views/HomePage.vue
@ ./client/src/router/index.js
@ ./client/src/main.js
Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! HeideParkTour@1.0.0 build: `node client/build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the HeideParkTour@1.0.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! /tmp/npmcache.bH7SD/_logs/2020-01-16T22_49_23_712Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Dangerous semver range (>) in engines.node
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
Я не понимаю, что с загрузчиком vue и загрузчиком Babel. Я попытался поместить vue -loader и babel-loader в зависимости вместо dev-зависимости. Это не сработало. Вот мой package.json файл:
{
"name": "HeideParkTour",
"version": "1.0.0",
"description": "Heide Park Tour webapp",
"author": "stu218608@mail.uni-kiel.de",
"main": "index.js",
"scripts": {
"dev": "concurrently \"nodemon app.js\" \"npm run dev-client\"",
"dev-client": "webpack-dev-server --inline --hot --config client/build/webpack.dev.conf.js",
"start": "nodemon app.js",
"build": "node client/build/build.js",
"e2e": "node client/test/e2e/runner.js",
"test": "npm run e2e",
"lint": "eslint --ext .js,.vue src client/test/e2e/specs"
},
"keywords": [],
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"concurrently": "^5.0.2",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.7.14",
"morgan": "^1.9.1",
"nodemon": "^2.0.1",
"shelljs": "^0.8.3",
"axios": "^0.19.0",
"leaflet": "^1.6.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue2-leaflet": "^2.4.1",
"vuetify": "^2.1.15",
"vuex": "^3.1.2",
"vuex-persistedstate": "^2.7.0"
},
"devDependencies": {
"@mdi/font": "^4.7.95",
"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-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",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"deepmerge": "^4.2.2",
"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.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"fibers": "^4.0.2",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass": "^1.24.0",
"sass-loader": "^8.0.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"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"
]
}
Это структура моего проекта:
|---app.js
|
├───client
│ ├───build
│ ├───config
│ ├───src
│ │ ├───assets
│ │ │ └───Intro-Page
│ │ ├───components
│ │ │ ├───common
│ │ │ ├───homepage
│ │ │ └───posts
│ │ ├───router
│ │ ├───services
│ │ ├───store
│ │ │ └───modules
│ │ └───views
│ ├───static
│ └───test
│ └───e2e
│ ├───custom-assertions
│ └───specs
└───server
├───config
├───controllers
├───models
├───public
│ └───static
│ ├───css
│ ├───fonts
│ ├───img
│ └───js
└───routes
Я также установил переменную env с помощью этой команды heroku config:set NODE_ENV=production --app heide-park-tour, но это не так похоже на работу. Я не уверен, что эта ошибка вызвана слиянием package.json файлов с клиента и сервера, но, пожалуйста, сейчас у меня нет вариантов: (.