Skip to main content

React errors and trouble-shooting

 Introduction:

I have recently started learning react in a linux machine and as I proceeded, I faced a number of issues with react,npm and npx. As I tried searching in net, it seemed that many of these are not well explained or documented together. In this post, we are going to document the errors and the solution which worked for me.

Error 1: npx create-react-app fails to run with error.

For this, I found this stackoverflow question to be helpful. If your npx fails, chances are that you have to first start your npm and then you need to run the npx command. The relevant code to run is:

npm init
npm install create-react-app
npx create-react-app myapp

Error 2: NPM — npm start Error: ENOSPC: System limit for number of file watchers reached

npm start error max watcher used
 

For this error, I followed this guide blog post. But sadly the solution is slightly incorrect. First, let's understand the problem. Max user watch error occurs in a linux machine because the number of files the system watches/monitors is crossed and therefore the system can't open another set of files with your new app.

Why does npm create this issue? 

npm and react uses hot loading of files i.e. it keeps reloading files on every changes performed. This dramatically increases number of files being watched. 

what is the solution?

In general your linux machine will have max watcher number around 8192. For some reason, all the solutions I found in net suggests to increase it to 524288. The code for this is:

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

This actually changes the max_user_watches number in the system file /etc/sysctl.config. So if you don't see the error going away after running this command once, maybe good idea is to open this sysctl.config file and manually change this file. You may need to use sudo vi sysctl.config to implement the changes in the case you are not a root user.

Also, another good idea to not trigger this issue at the first place is that don't run other heavy programs in the background. The react apps, with vs code occupies a lot of RAM on their own. So best not to run other heavy task ( like data crunching functions, android emulators, games etc) with this.

Error 3: the terminal of vs breaks citing some node version difference.

If some issue like this occur, it's a good idea to reinstall the node modules in your app directory. There are some related solutions where you have to delete node, n files from specific folders; but none of them helped me; hence I will not mention them.

 

Labels:

Comments

Post a Comment

Popular posts from this blog

Spacy errors and their solutions

 Introduction: There are a bunch of errors in spacy, which never makes sense until you get to the depth of it. In this post, we will analyze the attribute error E046 and why it occurs. (1) AttributeError: [E046] Can't retrieve unregistered extension attribute 'tag_name'. Did you forget to call the set_extension method? Let's first understand what the error means on superficial level. There is a tag_name extension in your code. i.e. from a doc object, probably you are calling doc._.tag_name. But spacy suggests to you that probably you forgot to call the set_extension method. So what to do from here? The problem in hand is that your extension is not created where it should have been created. Now in general this means that your pipeline is incorrect at some level.  So how should you solve it? Look into the pipeline of your spacy language object. Chances are that the pipeline component which creates the extension is not included in the pipeline. To check the pipe eleme...
Post a Comment
Read more

20 Must-Know Math Puzzles for Data Science Interviews: Test Your Problem-Solving Skills

Introduction:   When preparing for a data science interview, brushing up on your coding and statistical knowledge is crucial—but math puzzles also play a significant role. Many interviewers use puzzles to assess how candidates approach complex problems, test their logical reasoning, and gauge their problem-solving efficiency. These puzzles are often designed to test not only your knowledge of math but also your ability to think critically and creatively. Here, we've compiled 20 challenging yet exciting math puzzles to help you prepare for data science interviews. We’ll walk you through each puzzle, followed by an explanation of the solution. 1. The Missing Dollar Puzzle Puzzle: Three friends check into a hotel room that costs $30. They each contribute $10. Later, the hotel realizes there was an error and the room actually costs $25. The hotel gives $5 back to the bellboy to return to the friends, but the bellboy, being dishonest, pockets $2 and gives $1 back to each friend. No...
Post a Comment
Read more

GAM model : PyGAM package details Analysis and possible issue resolving

Introduction:                  picture credit to peter laurinec. I have been studying about PyGAM package for last couple of days. Now, I am planning to thoroughly analyze the code of PyGAM package with necessary description of GAM model and sources whenever necessary. This is going to be a long post and very much technical in nature. Pre-requisites: For understanding the coding part of PyGAM package, first you have to learn what is a GAM model. GAM stands for generalized additive model, i.e. it is a type of statistical modeling where a target variable Y is roughly represented by additive combination of set of different functions. In formula it can be written as: g(E[Y]) = f 1 (x 1 ) + f 2 (x 2 ) + f 3 (x 3 ,x 4 )+...etc where g is called a link function and f are different types of functions. In technical terms, in GAM model, theoretically expectation of the link transformed target variable is assume...
Post a Comment
Read more