0

I created a "Basic Vue.js Web Application" in Visual Studio 2019, and as soon as I attempt to run the web application on Chrome (without adding or changing anything at all inside the solution), it notifies me that it was "built with errors". The error shown is: The Command " npm run build " exited with code 1. from the file Microsoft.Common.CurrentVersion.targets as you can see in the following image:

enter image description here

Log file:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Bryan2\source\repos\VuejsApp2\node_modules\.bin;C:\Program Files (x86)\Common Files\Intel\Shared Libraries\redist\intel64\compiler;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0\;C:\windows\System32\OpenSSH\;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files\nodejs\;C:\Users\Bryan2\AppData\Local\Microsoft\WindowsApps;C:\Users\Bryan2\.dotnet\tools;C:\Users\Bryan2\AppData\Roaming\npm
9 verbose lifecycle [email protected]~build: CWD: C:\Users\Bryan2\source\repos\VuejsApp2
10 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'vue-cli-service build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `vue-cli-service build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\Bryan2\source\repos\VuejsApp2
16 verbose Windows_NT 10.0.18362
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.18.2
19 verbose npm  v6.14.5
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `vue-cli-service build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

I previously built a vue.js web application from visual code as the frontend while using ASP.NET Core as the backend in Visual Studio 2017 on another machine, and I'm trying to get the knack of Visual Studio 2019 and its updates on my new machine. What could I do to solve this problem?

EDIT

Here is the package.json as requested:

{
  "name": "test1-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "description": "Test1Vue",
  "author": {
    "name": ""
  },
  "dependencies": {
    "axios": "0.19.2",
    "chart.js": "2.9.3",
    "core-js": "3.6.5",
    "file-saver": "2.0.2",
    "html2canvas": "1.0.0-rc.5",
    "jspdf": "1.4.1",
    "jspdf-autotable": "3.5.6",
    "vue": "2.5.17",
    "vue-chartjs": "3.5.0",
    "vue-router": "3.3.4",
    "vuetify": "2.3.4",
    "vuex": "3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "3.0.4",
    "@vue/cli-plugin-eslint": "3.0.4",
    "@vue/cli-plugin-vuex": "4.4.6",
    "@vue/cli-service": "3.0.4",
    "eslint": "5.6.0",
    "eslint-plugin-vue": "4.7.1",
    "sass": "1.26.10",
    "sass-loader": "9.0.2",
    "vue-cli-plugin-vuetify": "2.0.7",
    "vue-template-compiler": "2.5.17",
    "vuetify-loader": "1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
0

1 Answer 1

2
+50

Visual Studio 2019 automatically installs the project's NPM modules upon opening the generated project. However, the process is relatively slow (slower than on command line with Surface Pro, i5-8250U 1.6/1.8 GHz, 8GB RAM), and there is no obvious UI indicator for the installation progress, so it's easy to overlook this pending state.

Oddly, Visual Studio allows you to try starting a build before the NPM module installation completes, in which case you'd notice errors related to missing modules (like the one you observed with vue-cli-service).

A workaround is to wait until the module installation completes, indicated by the Output window or Solution Explorer.

Output window

Open the Output window with CtrlAltO, and select Npm from the Show output from dropdown.

  • Installing: Notice Executing command 'npm install'.

    npm install in progress

  • Done: Notice npm command completed with exit code 0.

    npm install done

Solution Explorer

Open Solution Exporer with CtrlAltL, and expand the npm item.

  • Installing: Notice the npm's context menu disables Install npm Packages and Update npm Packages:

    disabled npm menu items

    ...and the NPM modules are shown with a yellow warning icon and a "(missing)" label:

    missing module icons

  • Done: Notice the NPM module icons change to an orange icon, and the label to "(dev)":

    installed module icons

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.