What steps should I follow to run my JavaScript application locally on Linux Mint?

Currently, I am diligently following a tutorial and ensuring that each step is completed accurately. My goal is to locally host my javascript app at localhost:3000. Unfortunately, I am facing difficulties as every attempt to run npm run dev results in an error log displaying the following:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ]
2 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="650b150825534b54514b51">[email protected]</a>
3 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a44454e4f6a5c1b1a041b13041a">[email protected]</a>
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37475245445859565b405255445e4352770719071907">[email protected]</a>~predev: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="19697c6b6a767778756e7c7b6a706d7c592937293729">[email protected]</a>
6 info lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="28584d5a5b474649445f4d4a5b415c4d681806180618">[email protected]</a>~dev: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12627760617d7c737e657770617b667752223c223c22">[email protected]</a>
7 verbose lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1c091e1f03020d001b090e1f0518092c5c425c425c">[email protected]</a>~dev: unsafe-perm in lifecycle true
8 verbose lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99e9fcebeaf6f7f8f5eefcfbeaf0edfcd9a9b7a9b7a9">[email protected]</a>~dev: PATH: /usr/share/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/omar-backup/Desktop/MrBoogle.github.io/personalWebsite/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
9 verbose lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62120710110d0c030e150700110b160722524c524c52">[email protected]</a>~dev: CWD: /home/omar-backup/Desktop/MrBoogle.github.io/personalWebsite
10 silly lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37475245445859565b405255445e4352770719071907">[email protected]</a>~dev: Args: [ '-c', 'vite' ]
11 silly lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bfbeef9f8e4e5eae7fceee9f8e2ffeecbbba5bba5bb">[email protected]</a>~dev: Returned: code: 1  signal: null
12 info lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b1a4b3b2aeafa0adb6a4a3b2a8b5a481f1eff1eff1">[email protected]</a>~dev: Failed to exec dev script
13 verbose stack Error: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f8889d8a8b979699948f9d9a8b918c9db8c8d6c8d6c8">[email protected]</a> dev: `vite`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/share/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/share/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfafbaadacb0b1beb3a8babdacb6abba9feff1eff1ef">[email protected]</a>
15 verbose cwd /home/omar-backup/Desktop/MrBoogle.github.io/personalWebsite
16 verbose Linux 5.4.0-26-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
18 verbose node v10.19.0
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 1
22 error <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f9899c8b8a969798958e9c9b8a908d9cb9c9d7c9d7c9">[email protected]</a> dev: `vite`
22 error Exit status 1
23 error Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70001502031f1e111c0715120319041530405e405e40">[email protected]</a> dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

After spending nearly an hour trying to troubleshoot this issue fruitlessly, I've installed vite without success. Instead of hosting my app on localhost:3000, a strange window appears using qt5ct. Unfortunately, this method no longer works due to potential errors caused by my attempts to resolve the initial hosting problem.

You can find the tutorial I'm referencing here. Specifically, my challenges arise around the 2:45 mark.

javascriptnpmlocalhost

Answer №1

Upon initializing a project using npm init, similar to the tutorial you followed, a project based on a template is generated in a specified directory. In your specific case, you executed:

npm init @vitejs/app

This command resulted in the creation of a folder with a predefined Node.js template, along with a package.json file that contains all the necessary dependencies for the project to function properly. For instance:

{
  "name": "vite-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.3.3"
  }
}

Notice the devDependency named vite, which must be installed to run the npm script 'dev', defined as "dev": "vite".

Initially, when you ran the command, the vite dependency was not installed in the project, leading to the following error message:

error <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1c091e1f03020d001b090e1f0518092c5c425c425c">[email protected]</a> dev: `vite`

Subsequently, upon running npm install, all the required dependencies listed in the package.json were downloaded and installed. This resolved the missing dependencies issue after installing the vite dependency through npm install.

As a result, the original error transformed into:

Cannot find module 'worker_threads'

This represents a separate error, likely stemming from using an outdated version of node (indicated by [email protected]). My attempt to replicate the scenario produced a similar problem: https://i.stack.imgur.com/jRayL.png

However, upon updating to a newer version (Node 14), the issue was resolved. Therefore, it's recommended to update your node version

https://i.stack.imgur.com/v2vmz.png

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

Error: The TVJS Framework encountered a JSON Parse issue due to an unexpected EOF

I am currently developing a TVML application specifically for Apple TV. However, when I attempt to execute this code to send a request to a remote server, I encounter the following error: SyntaxError: JSON Parse error: Unexpected EOF. My goal is to run thi ...

javascriptjsontvosapple-tvtvjs

Tips for updating the state of an individual component in ReactJS without having to re-render the entire component

As a beginner in ReactJS, I am seeking guidance on how to modify the state of a specific component that was created within a Map function. Imagine I have a basic component named panels, with multiple panel-items. Each panel-item is essentially one componen ...

javascriptreactjsreduxmaterial-ui

Retrieving information from an ajax array in PHP

I am currently attempting to retrieve an array of data using AJAX on the PHP side, but I am facing difficulties in accessing the values in PHP. Here is my JavaScript code snippet: console.log(obj); $.ajax({ method: 'POST', url: '/in ...

javascriptphpjqueryjsonajax

Choose the option in real-time with Jquery

I'm currently developing a dynamic HTML for Select Option as seen below: item += "<td class='ddl' style='width:40%;'>"; item += "<select>" item += " <option id='list' name='selector' value=" + se ...

javascriptjqueryhtml

Electron-forge is experiencing a few deficiencies in its dependencies

My setup includes: Windows 10, NMP 6.4.1, Node v10.13.0, GIT 2.8.4 I have created a basic app to display IMDB records: directory APIS / movie_search_app I downloaded the app to run locally on Windows and it is working fine. However, when I try to initi ...

node.jsnpmelectron

Transform the appearance of a button when focused by utilizing CSS exclusively or altering it dynamically

As a newcomer to coding, I am currently working on a project that involves changing the color of buttons when they are clicked. Specifically, I want it so that when one button is clicked, its color changes, and when another button next to it is clicked, th ...

javascriptcssreactjs

Error Encountered During Building Apache Cordova Project in Visual Studio 2015

Encountering an issue when attempting to launch my cordova project on both an android device and android emulators. Currently utilizing visual studio 2015 In dire need of assistance! Error can be viewed in the image below: ...

javascriptandroidvisual-studiocordovanpm

Maintaining awareness of which accordion drawer is currently open within a React application

Just getting started with coding, I recently created a collapsible accordion in a NextJs app using the react-collapse package. Everything seems to be working fine, but I'm running into an issue with keeping track of which 'drawer' is current ...

javascriptreactjsnext.js

Issue with NPM: Unable to locate the reference to 'Many' and the namespace '_' from the lodash library

I've been incorporating lodash into my angular2 project. Here are the commands I used: $ npm install --save lodash $ npm install --save @types/lodash Upon installing lodash, warning messages popped up for both the main library and the types: https: ...

angulartypescriptnpmlodashnpm-install

Connecting to deeply nested attributes within an object using specified criteria

I apologize if the title of my query is not very descriptive, I couldn't come up with a better one. Please feel free to suggest improvements. I am currently working on developing a reusable "property grid" in Angular. My goal is to create a grid wher ...

javascriptangularjs

While installing a node package, an error occurred: 'c++: error: `-stdlib=libc++` command line option is not recognized'

Encountering an issue when attempting to run npm install for a library, receiving the following error message: c++: error: unrecognized command line option '-stdlib=libc++' ...

npmg++

Error encountered when attempting to install a module using npm: "tunneling socket

Having trouble installing nodejs modules using npm on Windows while behind a proxy? Here is how I set up the proxy: npm config set proxy internet.cp:8080 npm config set proxy-http internet.cp:8080 Unfortunately, when attempting to install a packet, I enc ...

node.jsnpmproxy

Ways to verify if an ajax function is currently occupied by a previous request

Is there a way to determine if an ajax function is occupied by a prior call? What measures can be taken to avoid invoking an ajax function while it is still processing a previous request with a readyState != 4 status? ...

javascriptajax

Issues arising when attempting to replicate a fetch object into an undefined object in React.js

I'm facing an issue where I have defined a 'poke' object and when I try to clone an object into it, I only get a promise fulfilled with the object's link , instead of the actual object. Here's the code snippet: let poke = fetch(url ...

javascriptreactjs

Multiple executions of Ajax callback detected

I am trying to utilize an ajax-call to a script that searches for numbers. The response is expected to be a json array containing names and surnames as strings. However, I am facing an issue where the script seems to be looping and sending multiple respons ...

javascriptjqueryajax

Efficiently sending a cookie with an Axios POST Request

My request is not receiving a cookie even after trying various solutions like withCredentials. I have pasted the most recent code here, can anyone spot what might be missing? var cookie_for_data = "token=test"; var host = "http://localh ...

javascriptnode.jsapinpmaxios

What could be causing the header of the datatable to be out of alignment with the rest of

I'm facing an issue with my datatable where the header is misaligned with the content. Can someone please assist me in adjusting the header and content so that they are parallel? It doesn't look right at the moment. <div style="margin-top:1 ...

javascriptjqueryhtmlcss

Tips for implementing event handlers on dynamically generated li elements in VueJS

Creating multiple ul elements using v-for in the following way <div v-for="item in info"> <ul> <li><a>{{item.number}}</a></li> <li><a>{{item.alphabet}}</a></li> </ul> </div&g ...

javascripthtmlvue.js

HTML not updating after a change in properties

My template is structured as a table where I update a column based on a button click that changes the props. Even though the props are updated, I do not see the template re-rendered. However, since I am also caching values for other rows in translatedMessa ...

javascriptreactjstypescriptreact-hooks

Tips for limiting the .click function to only the initial image in order to prevent loading all images within the container

I am facing a situation where multiple images are being returned into a specific div, which is working as intended. <div class="go" id="container"></div> Upon clicking on an image, it is loaded into a modal popup. However, instead of capturin ...

javascriptjqueryhtml