Vue.js components in a Laravel 5.4 project work locally but not on Heroku

Question

Issue: I have a Laravel 5.4 project with Vue.js and use Heroku for deployment. Everything has been running fine until today when I noticed the changes I made in the Vue component file were working fine locally, but not being reflected on Heroku.

In the past this happened when I forgot to run npm run build, but when I executed npm run build this time I got the following error:

npm ERR! Linux 4.10.0-42-generic
npm ERR! argv "/home/caseydemo/.nvm/versions/node/v6.11.4/bin/node" "/home/caseydemo/.nvm/versions/node/v6.11.4/bin/npm" "run" "build"
npm ERR! node v6.11.4
npm ERR! npm  v3.10.10

npm ERR! missing script: build
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /home/caseydemo/Documents/gotcha/npm-debug.log

I wasn't sure what to make of this so I tried removing my node modules and re-installing them with the following commands:

rm -rf node_modules
npm install 

I got the following error after npm install ran:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/webpack-dev-server/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

I am currently running Ubuntu 16.04 Xenial. Not really sure what to do next, any help is appreciated.

here is my package.json file:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "hover.css": "^2.2.1"
  }
}

Answer 1

You don't have a method build defined in your scripts, you're looking for prod or production :

npm run production

The error message you received tells you as much:

npm ERR! missing script: build

And if you look in the scripts definition in package.json , you'll see there is no build defined for sure.