my server is no conncting.its shown error - javascript

First I install,
npx create-react-app amazon-clone
then I want to start. so I type
npm start
but I get an error.
my JSON file adds below.
{
"name": "amazon-clone",
"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-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"
]
}
}
why I am getting the error??
I see many stackoverflow answer but didn't get the point

I think you forgot to change the directory. Follow the steps below.
npx create-react-app amazon-clone
cd amazon-clone
npm start

Related

ERROR in [eslint] Failed to load config "react-app" to extend from. Referenced from: C:\code\React_Training\react-complete-guide\package.json

I am running across this issue when I run my React application:
Failed to compile.
eslint Failed to load config "react-app" to extend from. Referenced from: C:/code/React_Training/react-complete-guide/package.json
ERROR in eslint Failed to load config "react-app" to extend from.
Referenced from: C/code/React_Training/react-complete-guide/package.json
Here is my package.json file:
{
"name": "react-complete-guide",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"eslint": "3.19.0",
"eslint-plugin-react": "7.0.1",
"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 have checked three of the stackoverflow pages posted regarding this same error and was unable to resolve the issue I am having following those instructions. Additionally, before this issue, I was having a separate issue found here
https://github.com/jsx-eslint/eslint-plugin-react/issues/3128
When attempting to resolve that issue, I now find myself dealing with this issue.

Babel module not being seen even though it is in package.json and installed

I need some help with my React project. I can't compile any JSX and I'm completely lost on what to do. Currently this is the error when trying to compile:
I've tried deleting my package.json and node_modules folder and then running npm install. Nothing seems to work. I've tried completely removing node.js and everything relating to it and npm and reinstalling everything. I'm completely lost on what to do. I'm currently running WebStorm if that helps.
package.json:
{
"name": "tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.27.2",
"babel": "^6.23.0",
"#babel/preset-react": "7.18.6",
"eslint": "8.22.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"react-table": "^7.8.0",
"styled-components": "^5.3.5"
},
"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"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"author": "",
"license": "ISC",
"devDependencies": {
"eslint-config-react-app": "^7.0.1"
}
}
I have a babel.config.js in the src directory:
module.exports = {
"presets": ["#babel/preset-env", "#babel/preset-react"]
};

How do I instrument React and Cypress for code coverage?

I want to display code coverage for testing React in Cypress
The package.joson look like this
{
"name": "guitesttraining",
"version": "0.1.0",
"private": true,
"jest": {
"collectCoverageFrom": [
"src/components/**/*.js"
],
"coverageReporters": [
"cobertura",
"text"
]
},
"dependencies": {
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"jest-junit": "^13.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"serverless-finch": "^4.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts -r #cypress/instrument-cra start",
"build": "react-scripts build",
"test": "react-scripts test --coverage --reporters=default --reporters=jest-junit",
"eject": "react-scripts eject",
"cypress:run": "cypress run --record --key 3339aabe-1bcc-4f8c-8098-d08f47ac0b9b",
"postcypress:run": "npx nyc report --reporter=cobertura",
"cypress:open": "cypress open"
},
"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": {
"#cypress/code-coverage": "^3.9.12",
"#cypress/instrument-cra": "^1.4.0",
"#testing-library/cypress": "^8.0.2",
"#testing-library/jest-dom": "^5.16.2",
"cypress": "^9.5.2",
"cypress-jest-adapter": "^0.1.1",
"nyc": "^15.1.0"
}
}
The cypress/support/index.js
import './commands'
import 'cypress-jest-adapter'
import '#testing-library/cypress/add-commands'
import '#cypress/code-coverage/support'
The cypress/pluging/index.js
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config)
return config
}
After I have executed run start "react-scripts -r #cypress/instrument-cra start"
Console do not contain window.coverage object in the "Application under test iframe"
When I run npm run cypress:run I get a error message
- should toggel display and hide of details ⚠️ file /Users/steinko/development/cypresstaining/webtestingtraining/.nyc_output/out.json
has no coverage information Did you forget to instrument your web
application? Read
https://github.com/cypress-io/code-coverage#instrument-your-application
What must I do to instrument the web application?
I toght that running react-scripts -r #cypress/instrument-cra start instrumeneted the web application
I found a issue, instrument-cra still does not support react-scripts v5. After I try react-scripts v4.0.3, it does not work also.

Github pages is showing build error for my react app even after showing published in my terminal

whenever I deploy my react app to github pages it is showing the following error.
Your site is having problems building: Unable to build page. Please try again later
It was working fine even a week ago. This is the code of my package.JSON file
{
"name": "todolist",
"homepage": "https://srijit2002.github.io/todoapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"gh-pages": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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": {
"sass": "^1.32.13"
}
}

Failed to compile ./node_modules/#material-ui/core/ButtonBase/ButtonBase.js

I'm stuck with this error below:
Failed to compile ./node_modules/#material-ui/core/ButtonBase/ButtonBase.js Module not found: Can't resolve '#babel/runtime/helpers/builtin/assertThisInitialized' in 'E:\IT\the-venue\node_modules#material-ui\core\ButtonBase'
Since the problem has to do something with Babel I've installed the latest version coming from Babel's website (https://babeljs.io/setup#installation).
I've only done it until step 2, because the step 3 requires 'react' replacement with 'babel'in the 'scripts' section ('build' line) and I am not sure if I should do this.
Here is my package.json
{
"name": "the-venue",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^1.2.0",
"#material-ui/icons": "^1.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-reveal": "^1.2.2",
"react-scripts": "3.0.1",
"react-scroll": "^1.7.9",
"react-slick": "^0.23.1"
},
"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": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5"
}
}
I am working with Material UI and the expected result is the webpage with the header from Material UI (App Bar).
Would anyone explain what the problem is and help me solve it, please ?
npm install #material-ui/core#latest #material-ui/icons#latest react-reveal#1.2.2 react-scroll#1.7.9 react-slick#0.23.1
Do this and get the latest version of material-ui/core & material-ui/icons.
This will solve your problem.

Categories

Resources