npm run dev not working

Question

I have a problem with vueJs webpack, I want to run on the server, with a command: npm run dev. But I get some error message as below.

Could anyone tell me how do I solve it?? Thank you very much!

Error message

npm ERR! code EJSONPARSE

npm ERR! Failed to parse json

npm ERR! Unexpected token / while parsing '{

npm ERR! "name": "vue-loader-demo",

npm ERR! "versio'

npm ERR! File: /Users/sylvia/Documents/FE/Practice/vue/vue-loader-

demo/package.json

npm ERR! Failed to parse package.json data.

npm ERR! package.json must be actual JSON, not just JavaScript.

npm ERR! npm ERR! Tell the package author to fix their package.json file.

JSON.parse

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/sylvia/.npm/_logs/2018-04-17T12_39_56_372Z-debug.log

Here is the package.json

{
 "name": "vue-loader-demo",
 "version": "1.0.0",
 "description": "",
 "main": "main.js",
 "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot" 
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.5.0",
    "webpack-dev-server": "^3.1.3"
  }
}

webpack.config.js

module.exports={

entry:'./main.js',

output:{

 path:_dirname，

 filename:‘'bundle.js'’

} }

File structure

|-index.html

|-main.js

|-App.vue

|-package.json

|-webpack.config.js

Solution

I suspect the issue you're having is caused by the additional backticks in your webpack.config.js file.

Change this: filename:‘'bundle.js'’ To this: filename:'bundle.js'

Assuming I am correct - an error triggered here will cause the script referenced in the package.json to fail, which would result in webpack no longer seeing valid JSON (as it is seeing part JSON, part error).

This would potentially explain the "npm ERR! package.json must be actual JSON, not just JavaScript." error message in your log.

Comments

[Abhay Srivastav]

Seems to be some problem with package.json, recheck the file

[Alex Mulchinock]

It might be that there's a problem with your webpack.config.js file. Could you try posting this for us to see?

[Sylvia]

@Alex Mulchinock Here is the webpack.config.js file module.exports={ entry:'./main.js', output:{ path:_dirname， filename:‘'bundle.js'’ } }

[Alex Mulchinock]

Please add code to your question. It's difficult to read in comments!

[Sylvia]

@Alex Mulchinock sorry, the question is updated

[ceejayoz]

filename:‘'bundle.js'’ doesn't look right.

[MathKimRobin]

Please don't answer something else when somebody has already answered 2 years ago (stackoverflow.com/a/49879922/1717031). Mostly when your answer will not works. Here the problem is clearly a syntax error in webpack.config.js, not the way @sylvia uses npm.