Vue Cli app failing on deploy to heroku "ERROR: Can't resolve vue-axios"

Question

hey all I am trying to deploy a Vue-Cli app to heroku. on deploy I get an error that is telling me ERROR: can't resolve vue-axios.

here is the deploy log:

    -----> 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):  10.16.3
       engines.npm (package.json):   6.11.3
       engines.yarn (package.json):  1.17.3

       Resolving node version 10.16.3...
       Downloading and installing node 10.16.3...
       Bootstrapping npm 6.11.3 (replacing 6.9.0)...
       npm 6.11.3 installed
       Resolving yarn version 1.17.3...
       Downloading and installing yarn (1.17.3)...
       Installed yarn 1.17.3

-----> Installing dependencies
       Installing node modules (yarn.lock)
       yarn install v1.17.3
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info fsevents@1.2.9: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       [4/4] Building fresh packages...
       Done in 35.63s.

-----> Build
       Running build (yarn)
       yarn run v1.17.3
       $ node build/build.js
       Hash: 1a4e581f1f6c87da11b4
       Version: webpack 3.12.0
       Time: 21964ms
                                                         Asset       Size  Chunks                    Chunk Names
                      static/js/vendor.10e0802120f8774812f8.js     156 kB       0  [emitted]         vendor
                         static/js/app.b921d7af8c4576a6f4bb.js    3.33 kB       1  [emitted]         app
                    static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]         manifest
           static/css/app.07528487cac3300d975fbf17c681c8bf.css     652 kB       1  [emitted]  [big]  app
       static/css/app.07528487cac3300d975fbf17c681c8bf.css.map    1.14 MB          [emitted]         
                  static/js/vendor.10e0802120f8774812f8.js.map     771 kB       0  [emitted]         vendor
                     static/js/app.b921d7af8c4576a6f4bb.js.map    21.5 kB       1  [emitted]         app
                static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]         manifest
                                                    index.html  509 bytes          [emitted]         

       ERROR in ./src/main.js
       Module not found: Error: Can't resolve 'Vue-axios' in '/tmp/build_f242124990dad1f5430be392e7ea3925/src'
        @ ./src/main.js 6:0-33

         Build failed with errors.

error Command failed with exit code 1.
       info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/

       Love,
       Heroku

 !     Push rejected, failed to compile Node.js app.
 !     Push failed

I have looked at the package.json and all the dependencies are there, so I am rather confused about how to proceed to deploy with this error?

Any assistance would be greatly appreciated in this matter!

update my main.js file looks as follows:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueAxios from 'Vue-axios'
import { securedAxiosInstance, plainAxiosInstance } from './backend/axios'
import './main.css'

Vue.config.productionTip = false
Vue.use(VueAxios, {
  secured: securedAxiosInstance,
  plain: plainAxiosInstance
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  securedAxiosInstance,
  plainAxiosInstance,
  components: { App },
  template: '<App/>'
})

Answer 1

The package is called vue-axios, all in lowercase. You have Vue-axios in your imports, just a mistype.