I've been working on with React for a while, successfully using npm start to view how my application is running.
At some point, my app stopped loading at http://localhost:3000/.
I get this in the terminal:
Compiled successfully!
You can now view contact-list in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.16:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
In my Chrome browser, it looks like it's just perpetually loading, showing no errors. Nothing is showing up in the console.
I tried deleting the browser cache.
I tried checking http://192.168.1.16:3000. It also just perpetually loaded.
I tried another project on the same port and it worked, so it doesn't seem like an issue with the port.
Here is my package.json:
{
"name": "contact-list",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^5.1.3",
"react": "^18.1.0",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.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": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Does anyone know what could be going wrong?
Not enough data. But one of the reasons could be that at some point port 3000 was not released correctly. Try to kill the process by port, or simply reboot the system
Related
I am trying to publish my single page website to github pages, but I've run into an issue. When I go to the link for my website, it gives me a 404 error with this message: "File not found. The site configured at this address does not contain the requested file. If this is your site, make sure that the filename case matches the URL. For root URLs (like http://example.com/) you must provide an index.html file."
I've looked at the documentation, watched videos, and looked up other people who are having this issue, but nothing will solve it.
I have a main and a gh-pages branch. Right now I have it set to build from the gh-pages branch. If I change it to main I get the same issue.
Here is my package.json file:
"homepage": "http://bpyle02.github.io/portfolio",
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.4.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"aos": "^3.0.0-beta.6",
"autoprefixer": "9",
"gh-pages": "^3.2.3",
"postcss": "7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icon": "^1.0.0",
"react-icons": "^4.3.1",
"react-router": "^6.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"react-scroll-into-view": "^1.10.1",
"scroll-into-view": "^1.16.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"web-vitals": "^1.0.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b main -d build",
"start": "craco start",
"build": "craco build",
"test": "craco 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"
]
}
}
Here is the link to the repo: https://github.com/bpyle02/portfolio
You need to upload only the contents of your build folder to the gh-pages branch. I think it will benefit you to read about how GitHub Pages works.
The create-react-app documentation explains how to address your scenario:
https://create-react-app.dev/docs/deployment/#github-pages
Here's the most important information (without setting this before building your app, it won't work):
Open your package.json and add a homepage field for your project:
"homepage": "https://myusername.github.io/my-app",
Create React App uses the homepage field to determine the root URL in the built HTML file.
This might also be relevant to your app:
https://create-react-app.dev/docs/deployment/#serving-the-same-build-from-different-paths
I want to run create react app. I run the command:
npx create-react-app client
but I get this error:
You are running Node 10.9.0.
Create React App requires Node 14 or higher.
Please update your version of Node.
I updated it with latest version and using node -v it is showing version v18.13.0. But after that I'm still getting same error.
How do I solve the problem?
Things to try when this sort of thing happens:
If you haven't already, close the command prompt / terminal window where you're running this and open a new one.
If that doesn't work, completely reboot (mostly a Windows thing).
If that doesn't work, completely uninstall Node.js, reboot (mostly a Windows thing), and then install the latest.
Usually if the first two don't solve the problem, the last will.
You can manually define which Node engine to use for your project in package.json file.
{
"name": "client",
"version": "0.1.0",
"private": true,
"engines": {
"node": ">=18"
},
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.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"
]
}
}
I got answer for this from other site which you can use
npm uninstall -g create-react-app
npm install -g create-react-app#3.4.1
create-react-app my-app --scripts-version 3.1.1
I have a deployed active react app through GitHub pages and I'm looking to update it with newer code, i.e. color changes, update text, etc. The code has already been pushed to my GitHub repo, on my main branch but it's not updating the live GitHub page. I'm obviously missing something but couldn't find anything reading documentation or other stackoverflow questions. Can anyone help? Also I've seen a lot of people posting their package.json so here's mine
Edit: I already have the github pages live with prior code, but pushing the newer code to live is what I need help with.
{
"name": "react-portfolio",
"version": "1.0.0",
"private": "true",
"homepage": "N/A",
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build"
},
"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": {
"gh-pages": "^3.2.3"
}
}
I think you should to consider to add gh-pages-deploy in your script list.
Because of it will enable you to deploy straight to your github pages with one simple command.
But first, you neet to do npm install gh-pages-deploy -g to install the package globally in your environtment.
Here was the docs for gh-pages-deploy.
Thank you
You can use GH-pages-deploy to deploy your project to GitHub Pages
# install it from npm and symlink it into your PATH
npm install gh-pages-deploy -g
# now run it!
gh-pages-deploy
Or you can do several options to be able to run GH-pages-deploy by looking at the following documentation
I created a react app using yarn create react-app. Then I run yarn start and the project run properly on localhost. However, when I make an edit to a file (add a new tag, rename contents of a div..) the app throws an error and fails to compile with the error
[eslint] Failed to load config "react-app" to extend from.
Eslint is already installed. The crazy thing is, opening the package.json file and saving it solves the issue and the project compiles with the new changes. However I'd have to do this every time I make a change.
I am using Ubuntu on WSL .
Here is my package.json file
{
"name": "gmail-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.0.1",
"#testing-library/user-event": "^14.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.0"
},
"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"
]
}
}
A few ways to solve the issues:
Add the eslint-config-react-app
yarn add eslint-config-react-app -D OR yarn add eslint-config-react -D
Remove this code from package.json
"extends": [
"react-app"
]
},
Remove yarn.lock and reinstall node modules.
I had a similar problem, and I resolved it by installing eslint-config-react-app:
yarn add eslint-config-react-app -D
I moved to windows 11 from Linux , so i imported all my code from Linux..to windows .
So whenever i try to run a react project , I get a compile error stating :
Failed to compile
./src/index.js
Module not found: Can't resolve 'react/jsx-dev-runtime' in 'D:\code\react-workspace\react-advanced-2020-master\src'
This error occurred during the build time and cannot be dismissed.
React. js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components, Had to write something as it was displaying error :)
I tried npm i -g react-scripts and npm clean install
package.json
{
"name": "tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"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"
]
}
}