Heroku 在部署 MEVN 应用程序时构建错误，为啥 heroku 显示 babel-loader 和 vue-loader 错误？
Posted
技术标签:
【中文标题】Heroku 在部署 MEVN 应用程序时构建错误，为啥 heroku 显示 babel-loader 和 vue-loader 错误？【英文标题】：Heroku build error while deploying MEVN app, why is heroku showing babel-loader and vue-loader errors?Heroku 在部署 MEVN 应用程序时构建错误，为什么 heroku 显示 babel-loader 和 vue-loader 错误？ 【发布时间】：2020-05-03 20:36:20 【问题描述】：我在将 MEVN 应用程序部署到 Heroku 时遇到了一些问题。我用谷歌搜索了错误但找不到任何东西，请帮助我，我是 webpack 和 Heroku 的新手。我已经使用vue init webpack client 创建了我的 Vue 项目，并且我在不同的文件夹（服务器）中实现了我的服务器，因为 Heroku 需要构建脚本，我合并了客户端和服务器文件夹的 package.json 文件，并且我更新了我的包锁。 npm update 之后的 json 文件。但我仍然收到此错误：
-----> 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 "tryrequire('./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 loader 和 babel loader 是什么。我尝试将 vue-loader 和 babel-loader 放在依赖项中而不是 dev-dependencies 中，它不起作用。这是我的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
我也通过这个命令heroku config:set NODE_ENV=production --app heide-park-tour 设置了环境变量，但它似乎不起作用。我不确定这个错误是否是由于合并来自客户端和服务器的package.json 文件引起的，但请我现在没有选择:(。
【问题讨论】：
【参考方案1】：原来这里的问题是文件名，我觉得很尴尬?。早在我创建 Vue 项目时，我用首字母大写命名我的组件，后来我决定用小写字母命名我的组件。我在本地更改了它，但 GitHub 存储库不会更改组件名称。
例如。你在本地有 foobar.vue 并且 GitHub repo 有 'Foobar.vue`，GitHub 将忽略文件名更改。
我不太确定，但我发现 Heroku 在部署来自 Github 存储库的拉取项目时。所以它无法在远程仓库中找到我的组件“welcomeInfo”和“carousel”，它们是“WelcomeInfo”和“Carousel”。
【讨论】：
以上是关于Heroku 在部署 MEVN 应用程序时构建错误，为啥 heroku 显示 babel-loader 和 vue-loader 错误？的主要内容，如果未能解决你的问题，请参考以下文章
npm 错误！缺少脚本：将反应应用程序部署到heroku时构建
错误的ERR！缺少脚本：在将react应用程序部署到heroku时构建
在 Heroku 上部署 nextjs 应用程序 - 错误状态 H20