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.
i don't know why i get auto looping xhr socketjs-nodes like this:
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"
]
}
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
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
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.
Related
I am trying to build my react app. But when I run "npm run build", The terminal freezes on "Creating and optimized production build..." and never finish.
This is my JSON file. I tried on 16 GB ram also.
I have deleted package lock file and also rebuild the dependencies. But it remains same.
There is no specific solution anywhere, if anyone has solution please let me know.
{
"name": "demoapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.2",
"#material-ui/data-grid": "^4.0.0-alpha.33",
"#material-ui/lab": "^4.0.0-alpha.60",
"#mui/material": "^5.0.3",
"#progress/kendo-drawing": "^1.16.0",
"#progress/kendo-licensing": "^1.2.1",
"#progress/kendo-react-pdf": "^4.12.0",
"#progress/kendo-theme-material": "^4.43.0",
"#progress/kendo-ui": "^2021.3.1109",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"chart.js": "^3.5.0",
"dom-to-pdf": "^0.2.2",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"html-to-draftjs": "^1.5.0",
"pdf-viewer-reactjs": "^2.2.3",
"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-chartjs-2": "^3.0.4",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-hook-form": "^7.10.1",
"react-icons": "^4.2.0",
"react-loader": "^2.4.7",
"react-loader-spinner": "^4.0.0",
"react-modal-video": "^1.2.8",
"react-redux": "^7.2.4",
"react-responsive-carousel": "^3.2.21",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-table": "^7.7.0",
"reactstrap": "^8.9.0",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"sweetalert2": "^11.0.18",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Check to see if you have a local server running in another terminal (eg. localhost:3000 ).
If you do, end that server instance by terminating the batch job (with Ctrl+C) and try running npm run build again.
I recently had this issue. Check your package.json for react-scripts, if the version is <5.0.0 upgrade it to at least "react-scripts": "5.0.0".
Do a yarn install or npm install again, then yarn build or npm run build as the case may be.
Let me know if this works for you! Cheers!
If the process is stuck, it could be due to a lack in computing resources.
I would recommend investigating the currently running processes.
Try running sudo htop on a different terminal window and then run sudo npm run build.
You might find another process is taking too much memory, causing the build process to hang.
You may need to kill or restart such processes to complete the build.
It would be a good idea to check why those processes take so much memory, but that's besides the topic.
I am encountering this issue where prettier is giving me in excess of 1000 errors. I'm not sure what is causing it however here is how I got to this issue. I followed TraversyMedias guide on youtube to install eslint and prettier with the airbnb template. It was working great. I programmed for close to a day with it. Then after I started switching a component I had from React hooks state to Redux state I got an error saying that a file couldn't be found. After I fixed the issue it still was coming up with this error. I restarted my dev server and got a different error entirely it was an issue with the version of eslint i had. I can't remember the specific error but it was something along these lines "The react-scripts package provided by Create React App requires a dependency: "eslint": "^7.11.0". " After I got that error I followed these steps
To fix the dependency tree, try following the steps below in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
after I did that I encountered the error I am asking the question about.
some useful information My project structure is a top level project folder. it contains both my server and client folder and all three have their own package.json.
I look on this forum for someone with an error similar to mine and couldn't find any.
I googled many different worded questions about this issue and can't find anything on it.
I uninstalled prettier to see if it would go away. it didn't
here is what my package.json looks like in this order root folder client folder and server folder
{
"name": "sac-website",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "concurrently \"cd server && npm run dev\" \"cd client && npm start\" "
},
"author": "",
"license": "ISC",
"devDependencies": {
"concurrently": "^6.2.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0"
},
"dependencies": {
"eslint": "^7.28.0",
"eslint-config-node": "^4.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.4.0"
}
}
{
"name": "sac-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.58",
"#material-ui/pickers": "^3.3.10",
"#material-ui/styles": "^4.11.4",
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"date-fns": "^2.22.1",
"eslint": "^7.28.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-toastify": "^7.0.4",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-plugin-react": "^7.24.0"
}
}
{
"name": "server",
"version": "1.0.0",
"description": "The server for the sac website",
"main": "index.js",
"scripts": {
"start": "node app.js",
"dev": "nodemon app.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.12.11"
},
"devDependencies": {
"nodemon": "^2.0.7"
}
}
Any help you guys could give me would be fantastic. And please pardon me if I asked this question wrong. It is my first time asking any question on a programming forum.
The error I was getting had something to do with how eslint was set up or how prettier was set up. I deleted everything that was related to that and now the project is working.
In a React 17 project I wanted to run, there were 2 .ignore files: .prettierignore and .eslintignore.
I added the src folder to these files and with that the errors disappeared.
This way you don't have to remove everything, and you can leave it to address it at a later time if you want.
I just moved to ubuntu recently and I tried running a node app with the usual way git clone > npm i but I am having this error back when I try to run it.
It is a create-react-app app
Also it was running smoothly in wsl2
error:
Failed to compile.
./src/pages/Main/main.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/pages/Main/main.scss)
Error: /snap/core/current/lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.29' not found (required by /home/bihire/development/react/ikaze_web_app/node_modules/node-sass/vendor/linux-x64-84/binding.node)
package.json
{
"name": "ikaze_web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.14",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.54",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"draft-js": "^0.11.6",
"history": "^4.10.1",
"leaflet": "^1.6.0",
"material-ui-chip-input": "^2.0.0-beta.2",
"modernizr": "^3.11.2",
"node-sass": "^*",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-measure": "^2.3.0",
"react-parallax": "^3.0.3",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-sizeme": "^2.6.12",
"react-text-mask": "^5.4.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-state-sync": "^3.1.1",
"redux-thunk": "^2.3.0",
"text-mask-addons": "^3.8.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#iconify/icons-mdi": "^1.0.105",
"#iconify/react": "^1.1.3"
}
}
from my eyes it seems to be problem with node-sass but I am not sure
Is there some thing I should do to fix that?
This problem can occur with native (i.e. compiled, non-Javascript) npm modules when you install Node using the Ubuntu software manager.
For example, Ubuntu 20.04 comes with a system version of glibc 2.31.
However when you install the current latest version of Node via the Ubuntu software manager, it comes as a Snap package which also installs dependency package core containing glibc 2.23, and it is this one that your system version of Node will use (hence the path beginning /snap/core/current/lib/ in the error message, instead of just /lib/). Unfortunately, when you install native modules and the bindings are either downloaded or compiled locally for your system, the versions of the dependencies that the Snap package version of Node will be using are not taken into account, hence the error.
You should find that if you download the same version of Node from nodejs.org and run that binary instead of the system version from the Snap package then you won't get the error.
The solution is therefore not to install Node from the Ubuntu software manager. Use nvm or manual install instead.
I have working knowledge in conventional multi page applications developed in HTML + JS libraries using SSR but I am new to modern web development. I am currently learning Vue JS (the latest version) and I have watched some tutorial videos online. The videos I watched taught writing Vue JS web pages in a plain HTML + <script> setup instead of a project setup created by a Vue CLI program.
Now, I would like to know what NPM dependencies in the package.json file are required to change a project setup from a single HTML + Vue CDN script src to one with a folder structure set up by vue-cli, just like modern project folder structure created by other CLIs, e.g. Angular and React.
After running vue init <template name> I get a package.json like the following:
{
...,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
In this NPM project, it is not required to have a <script src> CDN link but I am still able to use all Vue features. I know the JavaScript file is already included in one of the node_modules folders. But what makes the HTML files to load the script from the folder/sub-folder/sub-sub-folder? I do not find any file path pointing to the JS file(s) in the project.
In Vue's official documentation, it states that:
The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.
May I know what dependencies do the job (or if it is the nature of a Node.js project, it is born this way) and any documentation or quotes from developers that are easy to understand for web dev newbies like me?
But what makes the HTML files to load the script from the folder/sub-folder/sub-sub-folder?
I think what you're looking for is webpack config - I suggest you when creating blank project via Vue-CLI select options manually to set each config in dedicated file (so e.g. webpack's one will be in webpack folder with different .config.js files (separately for development, common and production).
Webpack resolves for you all file paths and dependencies that are used inside your project and bundles them into one (or multiple part-chunk) JavaScript file.
Regarding your main question - what you see under dependencies section is what will be included in your final application code and is necessary to make it work. Although, what you have under devDependencies section is required to build/compile/transpile/minify etc. your project so in the end it will have all dependency paths resolved properly, styles compiled (e.g. from scss to css) and everything uglyfied + minified.
I have created a react application using create-react-app
but I want to move my application from node to apache and I'm not sure how to handle my project's dependencies. For instance, material-ui's documentation only lists npm on its installation guide.
Is there a way to get these dependencies to work on an apache server?
If so, would it be a separate configuration process for each dependency?
package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"material-ui": "^0.18.6",
"npm": "^5.1.0",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-flexbox-grid": "^1.1.3",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-tap-event-plugin": "^2.0.1"
},
"devDependencies": {
"babel-preset-env": "^1.6.0",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.0",
"eslint-plugin-react": "^7.1.0",
"react-scripts": "1.0.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
React applications don't depend on any particular server technology - once your build has run, it's just static JavaScript.
Running npm run build in your project's root will create a dist folder with your bundled application inside - all you need to do is deploy the contents of that folder to your Apache server.
See the 'Deploying' section of the create-react-app README for more info.
As an aside - if you've been using create-react-app's built-in server in production, don't! That's just designed for development, and is not performant nor secure enough for serving your app to the world.