CODEWITHSUNDEEP
vue.jsherokunpmwebpackbabeljs
Junaid
Junaid

Reputation: 51

Heroku build error while deploying MEVN app, why is heroku showing babel-loader and vue-loader errors?

I have been facing issues while deploying my MEVN application to Heroku. I googled the error but couldn't find anything, please help me I'm new to webpack and Heroku. I have created my Vue project using vue init webpack client and I had my server implemented in a different folder (server), since Heroku needs build scripts, I merged package.json files of client and server folder and I have updated my package-lock.json file after that by npm update. But I still get this error: 

-----> 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)

       > [email protected] 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

       > [email protected] 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`

       > [email protected] postinstall /tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"


       > [email protected] postinstall /tmp/build_2fcae940471da78ab872bed7c7ce5e39/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
       > node lib/post_install.js


       > [email protected] 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

       > [email protected] 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! [email protected] build: `node client/build/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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

I don't understand what's with vue loader and babel loader. I tried putting vue-loader and babel-loader in dependencies instead of dev-dependencies, It didn't work. Here's my package.json file:

{
  "name": "HeideParkTour",
  "version": "1.0.0",
  "description": "Heide Park Tour webapp",
  "author": "[email protected]",
  "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"
  ]
}

This is my project structure:

|---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

I have also set up the env variable by this command heroku config:set NODE_ENV=production --app heide-park-tour but It doesn't seem to work. I'm not sure if this error is caused because of merging package.json files from client and server, but please I'm out of options now :(.

Upvotes: 0

Views: 371

Answers (1)

Junaid
Junaid

Reputation: 51

Well it turns out the issue here is with filename, I feel so embarrassed🙈. Back when I created Vue project, I named my components with starting letter capitalized and later I decided to name my components with small letters. I changed it locally but then GitHub repo won't change the components name.

for eg. you have foobar.vue locally and GitHub repo has 'Foobar.vue`, GitHub will ignore the filename change.

I'm not really sure, but I figured out that, Heroku while deploying pulls project from Github repo. So it was not able to find my components "welcomeInfo" and "carousel" which were "WelcomeInfo" and "Carousel" in the remote repos.

Upvotes: 3

Related Questions