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

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.

vuejs2aws-amplifyvue-cli


Solution 1:[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.

Solution 2:[2]

You may want to use npm ci or to trash your node_modules, at least once just as a test. Seems like most CICD systems hitting this issue were resolved by destroying the node_modules artifact: https://github.com/vuejs/vue-cli/issues/2404

Solution 3:[3]

Is the vue-cli-service not intended only to be used for development? Amplify is not going to serve your content from that service, its a development dependency which you would use to run locally during development. I think you don't want a "start" script there at all as Amplify would look in your public folder and serve the index.html file there.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amaury Brisou
Solution 2 amishpanda
Solution 3 Action Dan

Related Questions