I have very interesting problem. I have node + react script. Example folders in below;
/client(React is here)
...some react folders + files
...package.json
/models
/routes
/package.json
When i try the create-react-app client in different folder "npm start" works correctly, but when i create react inside the node script npm start command gives error.
npm ERR! code ELIFECYCLE
package.json(node)
{
"name": "nodesrv",
"version": "0.1.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "nodemon server.js",
"dev": "concurrently \"npm run server\" \"cd client && npm start\"",
"start2": "node server.js",
"start": "cd client && npm install && npm run build",
"heroku-postbuild": "cd client && npm install && npm run build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"emailjs": "^2.2.0",
"express": "^4.16.4",
"is-empty": "^1.2.0",
"morgan": "^1.9.1",
"mysql2": "^1.6.5",
"next": "^8.1.0",
"nodemailer": "^6.1.1",
"pg": "^7.11.0",
"pg-hstore": "^2.3.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"rotating-file-stream": "^1.4.1",
"sequelize": "^5.8.5",
"validator": "^10.11.0",
"winston": "^3.2.1"
}
}
package.json (react)
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.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"
]
}
}
Related
I have the following package.json files for my app:
Client folder:
``{
"name": "nasa-fe",
"version": "1.0.1",
"private": true,
"dependencies": {
"arwes": "^1.0.0-alpha.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.8.0",
"react-scripts": "^5.0.1"
},
"overrides": {
"nth-check#1.0.2": "2.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "set BUILD_PATH=../server/public&& react-scripts build",
"test": "react-scripts test --passWithNoTests",
"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"
]
}
}
Server folder:
{
"name": "nasa-project-api",
"version": "1.0.0",
"description": "Nasa mission control api",
"main": "src/server.js",
"scripts": {
"test": "jest --detectOpenHandles",
"test-watch": "jest --watch",
"watch": "nodemon src/server.js",
"start": "node src/server.js",
"cluster": "pm2 start src/server.js -i max"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"csv-parse": "^5.3.3",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"mongoose": "^6.8.4",
"mongose": "^0.0.2-security",
"morgan": "^1.10.0",
"pm2": "^5.2.2",
"react-router-dom": "^6.8.0",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"jest": "^29.3.1",
"nodemon": "^2.0.20",
"supertest": "^6.3.3"
}
}
and root folder:
{
"name": "nasa-exploration",
"version": "1.0.0",
"description": "This a full stack project",
"main": "index.js",
"scripts": {
"deploy": "set BUILD_PATH=../server/public && npm run build --prefix client && npm start --prefix server",
"deploy-cluster": "npm run build --prefix client && npm run cluster --prefix server",
"server": "npm run watch --prefix server",
"client": "npm start --prefix client",
"watch": "npm run server & npm run client",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/yayoamigo/Nasa-exploration.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/yayoamigo/Nasa-exploration/issues"
},
"homepage": "https://github.com/yayoamigo/Nasa-exploration#readme",
"dependencies": {
"arwes": "^1.0.0-alpha.5",
"axios": "^1.2.4",
"dotenv": "^16.0.3",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.0",
"react-scripts": "^5.0.1"
}
}
as you can see I have react-scripts in every folder but get this error regardless, I tried to reinstall the dependencies, change the scripts and nothing. The weird things is when I npm run build on my PC it works
Just checked the Workflow in your repo and I see that you are running the following commands:
...
- run: npm install
- run: npm run build --prefix client
...
According to this, the npm run build --prefix client will run the build under the client directory, but the first command installs dependencies under the root folder. The build just can't find dependencies since it's not installed in the client directory.
So you need to change your install command to use the prefix also:
npm install --prefix client
To read more about prefixes, visit the official docs.
Alternatively, you can use the working-directory keyword to specify the working directory of where to run the command:
- name: Install
working-directory: client
run: npm install
- name: Build
working-directory: client
run: npm run build
I am starting the json-server from the project with command "npm run server" and saw this problem. Currentlt, it is a React project.
Terminal error picture
I have done some research, some suggest to downgrade node.js version and other to create "npm-shrinkwrap.json" in the project. So, what is the main problem of this and how to fix it permanently?
Package.json file:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^2.1.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server -p3001 --watch db.json"
},
"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": {
"json-server": "^0.4.2"
}
}
npm and node.js version:
Version
You can try to re-install node.js. The verisions cause of the this error.
My package.json works without husky and lint-staged but not with them.
It's saying:
npm ERR! code EJSONPARSE
npm ERR! file C:\Proyectos\my-app\package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token in JSON at position 1254 while parsing near '...
npm ERR! JSON.parse "lint-staged": {
npm ERR! JSON.parse "*.{...'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
What I added in package.json is...
"husky": {
"hooks": {
"pre-commit": "npm run test && prettier --write",
"pre-push": "npm run test && prettier --write"
}
},
"lint-staged": {
"*.{ts,tsx}": [
"prettier --write",
"git add"
]
}
Some user ask me to upload the whole package.json, so here is the code...
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.19.3",
"#types/react": "^16.9.55",
"#types/react-dom": "^16.9.9",
"#types/styled-components": "^5.1.4",
"lint-staged": "^10.5.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"typescript": "^4.0.5",
"web-vitals": "^0.2.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": {
"prettier": "2.1.2",
"styled-components": "^5.2.1"
},
"husky": {
"hooks": {
"pre-commit": "npm run test && prettier --write",
"pre-push": "npm run test && prettier --write"
}
},
"lint-staged": {
"*.{ts,tsx}": [
"prettier --write",
"git add"
]
}
}
Validate the package.json with https://jsonlint.com/
Check the package.json file. It might contain extra comma (,) or double quotes ("") which we have to remove.
That worked for me.
Try this now,
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.19.3",
"#types/react": "^16.9.55",
"#types/react-dom": "^16.9.9",
"#types/styled-components": "^5.1.4",
"lint-staged": "^10.5.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"typescript": "^4.0.5",
"web-vitals": "^0.2.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": {
"prettier": "2.1.2",
"styled-components": "^5.2.1"
},
"husky": {
"hooks": {
"pre-commit": "npm run test && prettier --write",
"pre-push": "npm run test && prettier --write"
}
},
"lint-staged": {
"*.{ts,tsx}": [
"prettier --write",
"git add"
]
}
}
I am new to the entire MERN Stack process.
I am following the tutorial for a user login app here:
https://blog.bitsrc.io/build-a-login-auth-app-with-mern-stack-part-1-c405048e3669
I've reached the end of the tutorial, and I feel I am missing a crucial step. If I run
npm run dev
I can successfully view and use the app at
http://localhost:3000/
Here is the script for dev in my root package.json:
"dev": "concurrently \"npm run server\" \"npm run client\""
However, isn't it also supposed to work if I run
node server.js
If I do this, I get this error at localhost:5000
Cannot GET /
I have a proxy setting in my client's package.json is well. Isn't this supposed to let me access the full app at
localhost:5000
Here is my root package.json:
"name": "example",
"version": "1.0.0",
"description": "example",
"main": "server.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "mystock",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"concurrently": "^4.0.1",
"express": "^4.16.4",
"is-empty": "^1.2.0",
"jsonwebtoken": "^8.3.0",
"mongoose": "^5.3.11",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"validator": "^10.9.0"
}}
Here is my client/package.json
{
"name": "client",
"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",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"jwt-decode": "^2.2.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
"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"
]
}
}
I'd appreciate any input!
Build failure
First MERN app. Having trouble deploying to Heroku. Everything worked when running locally. I've tried uninstalling/reinstalling react-bootstrap. What could be the problem?
Here's my package.json:
{
"name": "mern-workout-app",
"version": "0.1.0",
"engines": {
"node": "13.8.0"
},
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"styled-components": "^5.1.0"
},
"scripts": {
"start": "cd backend && npm install && node index.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbild": "cd client && npm install && npm run build"
},
"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"
]
}
}