CODEWITHSUNDEEP
javascriptnode.jsreactjs
user10583820
user10583820

Reputation:

React - Infinite looping xhr sockjs-node

I have never hosted a website using react.js (Create-React-App).

I have made this website online but I have not turned on the API.

enter image description here

i don't know why i get auto looping xhr socketjs-nodes like this:

Auto Looping enter image description here and even though I only entered 1 project using React.js and got Physical Memory Usage almost 600MB is this all because of this xhr?

here is my package.json :

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.12",
    "@fortawesome/free-brands-svg-icons": "^5.6.3",
    "@fortawesome/free-solid-svg-icons": "^5.6.3",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "@material-ui/core": "^3.7.1",
    "@material-ui/icons": "^3.0.1",
    "axios": "^0.18.0",
    "forever": "^0.15.3",
    "history": "^4.7.2",
    "js-cookie": "^2.2.0",
    "jsonwebtoken": "^8.4.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.23.0",
    "prop-types": "^15.6.2",
    "querystring": "^0.2.0",
    "react": "^16.7.0",
    "react-addons-update": "^15.6.2",
    "react-cookie": "^3.0.8",
    "react-dom": "^16.7.0",
    "react-image-gallery": "^0.8.12",
    "react-images": "^0.5.19",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.2",
    "react-select": "^2.3.0",
    "react-slick": "^0.23.2",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.7",
    "redux-thunk": "^2.3.0",
    "slick-carousel": "^1.8.1",
    "typeface-roboto": "0.0.54"
  },
  "scripts": {
    "start": "PORT=40000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Upvotes: 0

Views: 1870

Answers (3)

Pavindu
Pavindu

Reputation: 3112

We faced a similar issue with a production React.js app just today. When accessing the production React app, we were still seeing these errors, even though a production build is deployed.

Later only we got to know that some development artifacts slid into build artifacts during the build process. This had happened because the app was being built for production while a development server was running. While the app was being built, it had also taken the temporary development artifacts generated by the webpack-dev-server into account and had included those in the production bundle.

To make sure this doesn't happen again, we made sure not to production build React apps while the development server/s is/are running for the same app.

Upvotes: 0

Ariel Carrera
Ariel Carrera

Reputation: 5213

I had a similar problem and in my case the error was in my code where there was a loop between two resources, in one a resource "B" was requested from a resource "A", and in "B" it requested "A" to obtain an element of it.

https://stackoverflow.com/a/68202789/2493852

Upvotes: 0

GProst
GProst

Reputation: 10227

This is most likely webpack-dev-server's requests (maybe hot module replacement feature is enabled, not sure, maybe something else). Create-React-App uses it under the hood in development mode if I'm not mistaken (sorry, didn't use it a lot). So I believe it's fine, not sure if those 600MB of memory usage are related to it though.

My personal sidenote: I always found those bootstrap tools like Create-React-Apps a bad thing for beginners because it's hard to understand what's happening under the hood. My advice - either dig into what create-react-app uses under the hood to understand the stack better or just create your react app from scratch, it's not hard at all and IMO better. You'll probably just need node + webpack + react

Upvotes: 1

Related Questions