Why is npm start error creating react app - node.js

I'm learning reactjs
I started with installing nodejs
and then ran these commands inside my project folder "React"
npx create-react-app hello-world
cd hello-world
npm start
but then instead of going to the browser i receive error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\abc\AppData\Roaming\npm-cache_logs\2020-02-21T13_34_26_640Z-debug.log
PACKAGE.JSON CODE:
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
}
}
Help me solve this error i dont want it to demotivate me from learning React

npm scripts are missing inside your package.json file
npm ERR! missing script: start
Edit your package.json as follows:
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
}
}

I was also facing almost same type of problem. But then tried
yarn create react-app my-app
in power shell with admin privilege which seemed to do the trick.
Also you’ll need to have Node >= 8.10, yarn >= 0.25+ on your machine
as the official doc suggests.

Related

Install custom npm package in another custom npm package

I have create a npm package to install "gulp" & "nunjucks" and some other features of gulp. and published it in NPM repository named (package name: xdnunjucks-test).
Now I have created new project and trying to install "xdnunjucks-test" then it is added to my new project but all the dependencies in xdnunjucks-test are not added to new project.
command: npm install xdnunjucks-test
-- I should create a custom NPM package to install all dependencies in my new projects. This will helps me to avoid run all the commands in xdnunjucks-test everytime.
single command to run multiple commands.
here are my package.json file content.
Published Custom NPM command - package.json:
{
"name": "xdnunjucks-test",
"version": "1.0.5",
"description": "Custom npm command creation",
"main": "index.js",
"scripts": {
"test": "XDNunjucks",
"start": "npm install gulp",
"bootstrap-gulp": "npm i bootstrap-gulp",
"gulp-uglify": "npm install gulp-uglify",
"gulp-sass": "npm install node-sass gulp-sass",
"gulp-imagemin": "npm install gulp-imagemin",
"gulp-minify": "npm install gulp-minify",
"gulp-livereload": "npm install gulp-livereload",
"gulp-data": "npm install gulp-data",
"browser-sync": "npm install browser-sync"
},
"keywords": [
"npm",
"test"
],
"author": "Anil",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-data": "^1.3.1",
"gulp-imagemin": "^7.1.0",
"gulp-livereload": "^4.0.2",
"gulp-minify": "^3.1.0",
"gulp-nunjucks-render": "^2.2.3",
"gulp-sass": "^4.0.2",
"gulp-uglify": "^3.0.2",
"node-sass": "^4.13.1"
},
"dependencies": {
"bootstrap-gulp": "^2.2.5"
}
}
new project package.json:
{
"name": "n-test-2",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"xdnunjucks-test": "^1.0.5"
}
}
After installing the "xdnunjucks-test" command. I didn't get the features of "xdnunjucks-test" in new project.
Please help in in this.
Thank you.
All the dependencies in you package xdnunjucks-test is only "bootstrap-gulp" "^2.2.5"
all other dependency from devDependency will not be installer in package.
For example if you need to use gulp-uglify in installed package xdnunjucks-test - you should move it to dependency
devDependencies are:
installed on npm install on a directory that contains package.json, unless you pass the --production flag (go upvote Gayan Charith's answer).
not installed on npm install "$package" on any other directory, unless you give it the --dev option.
are not installed transitively.
You can find more about npm dependency on stackoverflow and npm documentation

! Push rejected, failed to compile Node.js app. ! Push failed

I've been trying to push my react website to heroku and it wouldn't let me however i have successfully pushed it to github. i have updated my node version as well but nothing seems to work. there are similar questions on this site regarding the same issue and i also followed their steps but nothing seems to work
sh: 1: ng: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! portfolio#1.0.0 heroku-postbuild: `ng build --prod`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the portfolio#1.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.XmdM7/_logs/2020-02-21T00_18_42_925Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
here's my package.json file
{
"name": "portfolio",
"version": "1.0.0",
"engines": {
"node": "12.16.1",
"npm": "6.13.4"
},
"description": "A clean, beautiful and responsive portfolio template for Developers!",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config webpack.dev.js --open",
"build": "webpack --config webpack.prod.js",
"heroku-postbuild": "ng build --prod"
},
"repository": {
"type": "git",
"url": "git+https://github.com/mkhawark/portfolio.git"
},
"keywords": [],
"author": "Mohammad Khawar",
"license": "ISC",
"bugs": {
"url": "https://github.com/mkhawark/portfolio/issues"
},
"homepage": "https://github.com/mkhawark/portfolio#readme",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.1",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"sass-loader": "^8.0.0",
"style-loader": "^1.1.2",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.0",
"tilt.js": "^1.2.1"
}
}
Have you read through this: https://devcenter.heroku.com/articles/getting-started-with-nodejs
It looks like your start script is just launching the development server, but with heroku you have to serve up the actual build files.
you have to build the project then static serve the build folder using a simple server. Here is a sample setup in one of my projects, notice npm start just fires the express server index.js: https://github.com/mattberg88/genome-project/tree/heroku
You can fix this by adding node_modules to your .gitignore page. You can check this link for more information: Fail to deploy node.js application to heroku
Let me know if this works for you :)

npm ERR! while installing next.js

I have a problem like while I am trying to install next.js using npm install --save next then showing below error like
npm ERR! Unexpected end of JSON input while parsing near '...:{"eslint":"3.19.0","'
I just stack into that for past several hours.
How can I resolve that?
package.json
{
"name": "a-client-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "node server.js -p $PORT",
"build": "next build",
"start": "NODE_ENV=production node server.js -p $PORT"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"express": "^4.17.1",
"react": "^16.9.0",
"react-dom": "^16.9.0"
}
}
Info:
OS: Windows 10
NodeJS: 10.16.3
NPM: 6.11.3
Thanks
The issue was due to the node cache.
npm cache clean --force
fixed the issue.
Writing answer here in case anyone else runs across this. :)

error while pushing node js project to heroku

I am getting this error while I am trying to push my project to heroku. Backend is writtend in nodeJS, frontend in React. I think the problem is heroku-postbuild, because if I remove it, push works. I was searching for it but still I have no idea what is the reason. Can somebody help me?
/tmp/build_7504975f08f330415cdefb27437cfad9/node_modules/.bin/node: 1: /tmp/build_7504975f08f330415cdefb27437cfad9/node_modules/.bin/node: MZ����#: not found
/tmp/build_7504975f08f330415cdefb27437cfad9/node_modules/.bin/node: 1: /tmp/build_7504975f08f330415cdefb27437cfad9/node_modules/.bin/node: Syntax error: word unexpected (expecting ")")
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! project#1.0.0 heroku-postbuild: `cd client && npm install && npm run build`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the project#1.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.W89m8/_logs/2018-11-13T21_37_22_676Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- node_modules checked into source control
https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
package.json (server)
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client-install": "npm install --prefix client",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "cd client && npm install && npm run build"
},
"author": "",
"license": "ISC",
"dependencies": {
"concurrently": "^4.0.1",
"express": "^4.16.4",
"jsonwebtoken": "^8.3.0",
"mongoose": "^5.3.4",
"node": "^8.10.0",
"nodemon": "^1.18.4",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"react-scripts": "1.0.11",
},
"devDependencies": {
"nodemon": "^1.18.4",
"react-scripts": "1.0.11"
}
}
package.json (client)
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"parallelshell": "^3.0.2",
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "2.0.5",
"socket.io-client": "^1.7.3",
},
"scripts": {
"start": "parallelshell \"react-scripts start\" \"sass --watch src/styles/scss:src/styles/css --style compressed\"",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"sass": "sass --watch src/styles/scss:src/styles/css --style compressed",
"sass-nw": "sass src/styles/scss:src/styles/css"
},
"proxy": "http://localhost:5000/",
}
I ran into the similar error while troubleshooting a project. I resolved it by using the suggestions from the prompt.
Some possible problems:
- node_modules checked into source control
https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
So try do a "rm -rf node_modules" in the root directory if you checked node_modules into the repository. Heroku will install node_modules in the deployed environment and does not need your checked in version.

Node/React app won't deploy to Heroku

My app has a React frontend and a Node backend; the BE serves the FE data through an API. It won't deploy to Heroku—stack trace is below.
Things I've tried:
This question. I've tried modelling my package.json files after a model repo mentioned in the answer, but no luck.
Deploying the model repo mentioned above—it worked fine.
Deploying the model repo to my own failing heroku app—it worked fine, so Heroku isn't the issue.
This question (I've checked react-scripts is listed as a dependency and not a dev-dependency).
I will probably end up taking the model repo as a starting point and gradually copying my project over, but would appreciate any info on what might be going wrong.
Stack Trace:
> fsevents#1.0.17 install /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents
> node-pre-gyp install --fallback-to-build
node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.0.17/fse-v1.0.17-node-v48-linux-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for fsevents#1.0.17 and node#6.10.3 (node-v48 ABI) (falling back to source compile with node-gyp)
make: Entering directory '/tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents/build'
SOLINK_MODULE(target) Release/obj.target/.node
COPY Release/.node
make: Leaving directory '/tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fsevents/build'
> fibers#1.0.15 install /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client/node_modules/fibers
> node build.js || nodejs build.js
`linux-x64-48` exists; testing
Binary is fine; exiting
added 1242 packages in 52.433s
removed 1242 packages in 25.561s
> react-ui#0.1.0 build /tmp/build_f03b382a2b768aeb89ff9c197145d0a5/client
> react-scripts build
sh: 1: react-scripts: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! react-ui#0.1.0 build: `react-scripts build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the react-ui#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
My server package.json:
{
"name": "in-search-of-happiness",
"engines": {
"node": "6.10.x"
},
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"heroku-postbuild": "cd client/ && npm install --only=dev && npm install && npm run build"
},
"cacheDirectories": [
"node_modules",
"client/node_modules"
],
"dependencies": {
"body-parser": "^1.17.2",
"cookie-parser": "^1.4.3",
"debug": "~2.6.3",
"express": "~4.15.2",
"jade": "^1.11.0",
"mongoose": "^4.10.8",
"morgan": "^1.8.2",
"serve-favicon": "^2.4.3",
"zombie": "^5.0.5"
}
}
My React package.json:
{
"name": "react-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.3.7",
"fetch": "^1.1.0",
"node-fetch": "^1.7.1",
"process-nextick-args": "^1.0.7",
"react": "^15.6.1",
"react-bootstrap": "^0.31.0",
"react-dom": "^15.6.1",
"react-scripts": "1.0.7",
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"chai": "^4.0.2",
"eslint": "^4.0.0",
"sinon": "^2.3.5",
"wdio-mocha-framework": "^0.5.10",
"webdriverio": "^4.8.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001"
}
Hello your post build script needs some modification, kindly follow this convention
Replace reactFolderName to your folder name that contains the react frontend
Add This below snippet to your package.json under the scripts
scripts{
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactFolderName && npm run build --prefix reactFolderName"
}
And add this snippet to your index.js file
app = express()
app.use(express.static('reactFolderName/build'));
app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'reactFolderName', 'build', 'index.html')));

Resources