Issues encountered with executing `npm run dev`

Encountering an issue with vueJs webpack while trying to run it on the server using the command: npm run dev. Unfortunately, an error message keeps popping up.

Can anyone offer guidance on how to resolve this issue? Your help is greatly appreciated!

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

Sample of the package.json file

{
 "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 file

module.exports={

entry:'./main.js',

output:{

 path:_dirname,

 filename:‘'bundle.js'’

} }

Project file structure

|-index.html

|-main.js

|-App.vue

|-package.json

|-webpack.config.js

Answer №1

I believe that the issue you are experiencing is likely due to the presence of extra backticks in your webpack.config.js file.

Update this line: filename:‘'bundle.js'’ To this: filename:'bundle.js'

If my assumption is correct, a mistake in this area could cause the script referenced in the package.json file to fail, leading to webpack no longer recognizing valid JSON (resulting in a combination of JSON and errors).

This could potentially clarify the "npm ERR! package.json must be actual JSON, not just JavaScript." message that appears in your logs.

Answer №2

Give this command a shot:

sudo npm run dev

Answer №3

I recently encountered a solution that worked for me: Double check that your working directory is accurate. When initiating the creation of next, react, or vue applications, a new directory is generated where crucial files like package.json and scripts are located. It's essential to navigate into that specific folder before executing npm run dev.

Answer №4

After utilizing for verification, it was found that the issue lies in the fact that the author field must not be left empty: errors:["author field should have name"]

Answer №5

Try these steps if you encounter issues with

npm install && npm run dev
not functioning properly in your Laravel project.

  1. composer require laravel/ui --dev
  2. npm install
  3. npm run dev

Avoid using

npm install && npm run dev

If you face any other problems, navigate to the specified path and make the necessary changes:

C:\Program Files\nodejs\node_modules\npm\bin

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble configuring Travis; crashes just before installation begins

Today I attempted to set up Travis on my GitHub project but encountered a few roadblocks (refer to the screenshot). I experimented with different configurations in .travis.yml, such as the one below: language: node_js node_js: - "8.11.2" sudo: false b ...

How can I create a box-shaped outline using Three.js?

As someone new to threejs, I have been trying to figure out how to render a transparent box around a symbol in my canvas. The box should only display a border and the width of this border should be customizable. Currently, I am using wireframe to create a ...

What is the best way to implement a useState within a context for testing with jest?

function CustomComponent() { const {val, change} = useContext(ProviderContext) return ( <TextField> onChange={({target}) => { change(target) }} value={val} </TextField> ); } describe('test', ( ...

Avoid using @testing-library during npm installation

Is there a way to avoid installing @testing-library* when running npm install? I have a docker container with over 4000 lines in my package-lock.json. Is there a way to skip the installation of @testing-library*? FROM node:17.5 # set working directory WOR ...

Attempting to develop a versatile and reusable function to handle a variety of statuses

I've implemented a function in my component that filters records based on a specific status and then displays the count of those records on the screen. {props.locations.filter(x => x.details && x.details.status === "NEVER").length} Currently, the ...

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...

Dealing with Challenges in Constructing JQuery URLs

I'm facing an issue with loading a website into a specific div (div.content). The website I'm trying to load requires a login through a POST request. When the javascript attempts to load the site, it recognizes the redirection to the login form ...

Express JS form validation using hapi/Joi fails to accurately validate the input data in forms

I am currently facing an issue with my form validation using the hapi/Joi package. The problem is that the schema keys are all taking the value of "undefined", which results in the first validation error being returned. How can I resolve this issue? Additi ...

Encounter an issue while trying to install pngquant-bin using npm

Upon installing npm, everything seemed to be working fine until an error occurred. I've been trying to troubleshoot the issue without any success so far. Post-installation, when attempting to run 'npm run dev', I encountered more errors whic ...

Converting Javascript tools into Typescript

I'm currently in the process of migrating my Ionic1 project to Ionic2, and it's been quite an interesting journey so far! One challenge that I'm facing is how to transfer a lengthy list of utility functions written in JavaScript, like CmToFe ...

The Protractor tool (node:9208) threw an UnhandledPromiseRejectionWarning due to an ElementNotVisibleError, indicating that the element is not interactable. Despite this

I am attempting to interact with an element using protractor but encountering the following error (node:9208) UnhandledPromiseRejectionWarning: ElementNotVisibleError: element not interactable (Session information: chrome=69.0.3497.92) (Driver informa ...

The duplication of rows occurs when using the vue3 v-for directive on columns

It may seem trivial but I am struggling to prevent the row from being duplicated. Here is the code snippet in question: <div class="row" v-for="(column, index) in columns" :key="index"> <Column :columnName=" ...

Uncovering the Issue with Select All Functionality in <Table/> when using Material-UI and React

When using Material-UI's <Table/> with ReactJS, a table is set up with a select all checkbox. Each time an individual row checkbox is clicked, the row id is added to the state array clickedRowIds. This allows for logging of the ids of the clicke ...

Encountering a module not found error while accessing Node.js via SSH in Virtualbox

I have set up a Debian stretch minimal installation in Virtualbox, running headless, to test a node application. To install a dependency for my node application, I used sudo npm install -g discord.js. I opted for a global installation because the director ...

How can you exhibit various images without relying on the <img> tag?

Is there a more efficient way to display over 500 images from a folder on an HTML page without the need to manually write out each img src tag? I have searched online for solutions, but most suggestions involve using PHP or "glob", which I am hesitant to ...

Tips for adjusting the color of multiple classes that have a common class using a toggle feature

I am working on a simple website using bootstrap 4 and SCSS. I want to include a toggler that switches between dark and light modes on the webpage. However, I'm facing an issue with changing the background color of 6 Bootstrap cards, footer, and the t ...

Determining the total number of combinations possible from a collection of five arrays containing items

I have five massive collections filled with various strings, and each of them contains a different number of elements. Below are examples of the lists: List 1 "Jeffrey the Great", "Bean-man", "Joe", "Charles", "Flamur", "Leka", ...

Choosing an array from the MongoDB database

{ "_id": "4f609932615a935c18r000000", "participants": [ { "user_name": "john1", "role": "user", "created_at": { "sec": 1331730738, "usec": 810000 }, { "user_name": "john2", "role": ...

Can a nodeJS script be written to automate selecting options and filling out forms in HTML?

Greetings everyone, I am new here so please excuse me if my formatting is not up to par. Currently, I am tackling a project for an internship and after some extensive research, I am stumped on how to automate certain reports in the next phase. In summary ...

Comparing the efficiency of using arrays versus mapping to an object and accessing data in JavaScript

When considering the basics of computer science, it is understood that searching an unsorted list typically occurs in O(n) time, while direct access to an element in an array happens in O(1) time for HashMaps. So, which approach yields better performance: ...