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

Labels:

Comments

Post a Comment

Popular posts from this blog

Mastering SQL for Data Science: Top SQL Interview Questions by Experience Level

Introduction: SQL (Structured Query Language) is a cornerstone of data manipulation and querying in data science. SQL technical rounds are designed to assess a candidate’s ability to work with databases, retrieve, and manipulate data efficiently. This guide provides a comprehensive list of SQL interview questions segmented by experience level—beginner, intermediate, and experienced. For each level, you'll find key questions designed to evaluate the candidate’s proficiency in SQL and their ability to solve data-related problems. The difficulty increases as the experience level rises, and the final section will guide you on how to prepare effectively for these rounds. Beginner (0-2 Years of Experience) At this stage, candidates are expected to know the basics of SQL, common commands, and elementary data manipulation. What is SQL? Explain its importance in data science. Hint: Think about querying, relational databases, and data manipulation. What is the difference between WHERE ...
Post a Comment
Read more

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

introduction to streamlit using python: create data applications

Introduction:    Photo by Luke Chesser on Unsplash If you are a data scientist and not an expert in web frameworks; many times you must have felt that you would like to have a program which would help you magically transform your data science application into a interactive data application. For what seemed like an eternity; there was no tool and we all had to create dashboards and what not to suffice for an interactive data app. But now the wait is over; as Streamlit is here.  what is streamlit? streamlit; as their official website tells, is the "fastest way to build and share data apps." Now as you are getting really excited; let me give you some more good news. Yes, you can use streamlit just as a python library because instead of being an app running software; streamlit data apps can be created just using the streamlit library. The apps run from your terminal on saying "streamlit run script_name.py" where the script_name.py is just a normal python script wher...
Post a Comment
Read more