sh: vue-cli-service: command not found at build step of aws amplify for vuejs2 app

Question

I am trying to deploy an vue app in AWS amplify.

Below is my build configuration-

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run production
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

My package.json in the vue app -

{
    "name": "foobar",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "start": "./bin/web.js",
        "serve": "vue-cli-service serve --mode development",
        "production": "vue-cli-service build --mode production",
        "sandbox": "vue-cli-service build --mode sandbox",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "axios": "^0.18.0",
        "bignumber.js": "^8.0.1",
        "bootstrap": "^4.3.1",
        "connect-history-api-fallback": "^1.5.0",
        "cors": "^2.8.5",
        "currency-formatter": "^1.5.3",
        "ethereum-blockies": "^0.1.1",
        "ethereum-blockies-base64": "^1.0.2",
        "express": "^4.16.4",
        "from-now": "^1.0.2",
        "jquery": "^3.3.1",
        "lodash": "^4.17.11",
        "moment": "^2.22.2",
        "popper.js": "^1.14.7",
        "socket.io-client": "^2.3.0",
        "vue": "^2.5.17",
        "vue-axios": "^2.1.4",
        "vue-multiselect": "^2.1.4",
        "vue-router": "^3.0.1",
        "vuejs-paginate": "^2.1.0",
        "vuex": "^3.0.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.2.0",
        "@vue/cli-plugin-eslint": "^3.2.0",
        "@vue/cli-plugin-unit-mocha": "^3.2.0",
        "@vue/cli-service": "^3.2.0",
        "@vue/test-utils": "^1.0.0-beta.20",
        "babel-eslint": "^10.0.1",
        "chai": "^4.1.2",
        "eslint": "^5.8.0",
        "eslint-plugin-vue": "^5.0.0-0",
        "node-sass": "^4.11.0",
        "sass-loader": "^7.1.0",
        "vue-cli-plugin-bootstrap": "^1.0.0-alpha.1",
        "vue-template-compiler": "^2.5.17"
    }
}

In the build step it's failing, so I pulled up the log and saw following error-

2020-03-25T06:37:48.522Z [WARNING]: sh: vue-cli-service: command not found

Why the error? vue-cli-service is there in the dev dependencies.

Answer 1

A quick fix that did work for me is to install @vue/cli-service globally with this command npm install -g @vue/cli-service

Also make sure your npm install command runs in NODE_ENV=development otherwise devDependencies won't be installed.

Answer 2

Wow, it's been a while since this question was asked. In my case I was able to solve it by setting the NODE_ENV variable to "development" in the prebuild commands, like this:

frontend:
  phases:
    preBuild:
      commands:
       - NODE_ENV=development
       - npm ci
  build:
    commands:
      - NODE_ENV=${NODE_ENV}
      - npm run build --prod

This way you can install without problems the devDependencies which is where @vue/cli-service` is added.