Encountered an issue while attempting to run the npm run serve command on a

I tried running the following commands to create my first Vue app:

vue create myfirstapp 
atom (for open my editor)
cd myfirst app
npm run serve

But I encountered this error:

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="600d19060912131401101020504e514e50">[email protected]</a> serve /home/paolinsky/Documentos/vueBasico/fazt/myfirstapp
> vue-cli-service serve

 INFO  Starting development server...
10% building 2/2 modules 0 activeevents.js:196
      throw er; // Unhandled 'error' event
      ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/paolinsky/Documentos/vueBasico/fazt/myfirstapp/public'
    at FSWatcher.<computed> (internal/fs/watchers.js:168:26)
    at Object.watch (fs.js:1351:34)
    ...

This issue persists across all my Vue projects, even when creating new ones.

My software versions are: npm: 6.13.4 node: v13.3.0

I am using Ubuntu 18.04 on an Asus VivoBook laptop with 4GB RAM and Intel Core i3 7th gen processor.

javascriptvue.jsnpmfrontendvue-cli

Answer №1

Dealing with a similar issue not long ago, I managed to resolve it using the following method:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

cat /proc/sys/fs/inotify/max_user_watches

fs.inotify.max_user_watches=524288

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

Working with Variables in Handlebars with Node.js

Is it possible to reference an object key with a space in a handlebars view? The specific key is "Record Number" within the object, but I am encountering difficulties when trying to reference it in the view. Here's the code snippet from the view: {{# ...

javascriptnode.jsforeachkeyhandlebars.js

Arrangement of images in an array

Here's the scenario I'm facing. https://i.stack.imgur.com/FbAfw.jpg So, I have an array of images that I want to use to create a gallery with a specific layout. I've tried using grid and playing around with :nth-child(even) and :nth-child( ...

javascriptphpcssarraysforeach

"Create a React button component that, when clicked, navig

I'm currently developing a web application using React and bootstrap. I'm facing difficulties in redirecting the page to another one when applying onClick to buttons. After adding a href, I'm unable to navigate to another page. Do you think ...

javascriptreactjsbootstrap-4

What is the process of exporting a module that has been imported in ES6?

Here are 3 code snippets: // ./src/index.ts const myApp = { test: 1, ... } export default myApp // ./src/app.ts import myApp from './src/index' export default myApp // ./index.vue import { example } from './src/app.ts' console.l ...

javascriptvue.jsecmascript-6vite

Having trouble making Three.js with instancing work properly unless FrustumCulling is set to false

I've encountered an issue with three.js and instancing, similar to what others have experienced. The objects are randomly clipped and disappear from the camera view. Examples can be found here. Mesh suddenly disappears in three.js. Clipping? Three.j ...

javascriptthree.js

Unable to locate item by its identification number

Search for results in the index and return them. Method: async fetchIndex(req,res){ const userResults = await Usuario.find(); res.json(userResults); }, Route: routes.get('/api/usuarios', Usuario.fetchIndex); Having trouble ...

javascriptnode.jsreactjsmongodbexpress

The issue with redirection not functioning is due to the specific sequence in which functions are executed

I'm currently working on a login page with the functionality to redirect users to a private panel if the login is successful and a token is stored in local storage. All functions are triggered onSubmit() of the form. This is an overview of my code: ...

javascriptreactjstypescriptreact-router

Leveraging Fetch in React for retrieving information from a server

Attempting to retrieve data from the server (using Node.js) using the code below: componentDidMount = () => { fetch('http://localhost:3000/numberofjobs') .then(response => response.json()) .then(numberOfJobs => { console.log(numbe ...

javascriptnode.jsreactjsexpress

looking to retrieve the corresponding value of a specific array key

I am trying to determine the value of a complex array, but I keep getting values like 0,1,2,3,4,5 as answers. Here is the code snippet I am using to retrieve the state value of the array: var shardState = Object.keys(mydata.cluster.collections[collection ...

javascriptarrays

Display/Conceal Content with Checkbox Utilizing jQuery

I have been attempting to create a section of an HTML form that will display or hide based on the status of a checkbox. Here is the key code snippet I am using: <script src="/js/jquery.js"></script> <script language="JavaScript"> fun ...

javascriptjquerycheckboxshow-hide

submit messages that have been sent before in the group chat

Currently, I am employed at a messaging application where I aim to save messages in an object structure like this : { 'room1': ['msg1', 'msg2', ...] 'room2': ['msg3', 'msg4', ...] ... } To ...

javascriptnode.jssocketswebsocket

Tips for executing a function whenever unfamiliar anchor elements are selected in Vue.js 3

I am utilizing a div with v-html to showcase data fetched from a database: <div id="Content" v-html="${Content}"></div> Inside the presented ${Content}, there may be various a tags linking to external pages. I aim to parse ...

javascriptvue.jsvuejs3

Adding a dynamic style programmatically to an element created using createElement in Vue: A guide

I have a canvas element that is created programmatically and I am looking to apply a reactive style to it. canvas = document.createElement('canvas') //Apply style this.$refs.parentElement.appendChild(canvas) In a typical scenario, you would u ...

javascriptvue.js

Utilizing ReactJS to retrieve configuration settings from a YAML file, similar to how it is done

Our team is currently using a full-stack multi-microservice application where the backend java components utilize the spring @value annotation to fetch configuration values from a yml file. This method has been effective and even the Java side of our UI c ...

javascriptjavareactjsspringconfiguration

I'm having trouble understanding why the MUI CORE basic rating code is returning undefined for setValue. Can anyone help

My first experience with MUI CORE was not smooth as I encountered an error when trying to use active rating and the set value is not defined i mport './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import Movie from './ ...

javascriptreactjsreact-hooksmaterial-uijsx

Tips for making an input form that triggers an alert popup

After creating an HTML form with text input, utilizing Javascript for validation as shown below: I am trying to trigger an alert box thanking the user for entering data when the submit button is clicked. I have faced challenges in implementing this witho ...

javascriptcssformsvalidation

Tips on saving stimulsoft report js onto a server using Angular

I am working on a report designer component and have assigned a method to the onSaveReport event. However, I am encountering an issue where the member of my component is showing as undefined. options: any; designer: any; public document: Report ...

javascriptangulartypescriptstimulsoft

Using Vue.js to send various data to child components through the router

I am facing a dilemma with the nested router setup in my Vue app. Here is a snippet from my router/index.js: { path: "/parent", name: "Parent", component: () => import(/* webpackChunkName: "parent" */ &qu ...

javascriptvue.jsvue-routervuejs3

When invoking a JavaScript method, the context variable 'this' is lost

I have developed a basic pointer to a method like this: export class SmbwaService { getExistingArsByLab(labId: number): Observable<SmwbaAr[]> { this.otherMethod(); } otherMethod(): void { } } let method: (x: number) => ...

javascripttypescript

Implement a toggle feature for login and registration with jQuery

I am facing an issue with the show/hide model on my website. When I click the link associated with it, nothing happens. I want it to function in a way that when I click "Sign up," the register form is displayed and when I click "Login," the register form ...

javascriptjqueryhtmlcss