Node.js app failed to build when pushing to Heroku - javascript

I'm new to coding and I'm currently developing an embedded app for Shopify using Node.js according to this tutorial. (https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react)
My app works fine locally but failed to build when pushing to Heroku. I've tried every solution I can find online but none of those works.
It seems that there's a syntax error in my code but I've already delete that part, why does the error still exist?
-----> Build
Running build
> collection-generator-app#1.0.0 build /tmp/build_9491321e44d82596e81efddc7086d165
> next build
Creating an optimized production build ...
Failed to compile.
./pages/fetch-query.js
SyntaxError: /tmp/build_9491321e44d82596e81efddc7086d165/pages/fetch-query.js: Unterminated JSX contents (34:9)
32 |
33 | return (
> 34 | <div>
| ^
35 |
36 | );
37 | }}
> Build error occurred
Error: > Build failed because of webpack errors
at Object.build [as default] (/tmp/build_9491321e44d82596e81efddc7086d165/node_modules/next/dist/build/index.js:101:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! collection-generator-app#1.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the collection-generator-app#1.0.0 build 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.Galdd/_logs/2019-05-09T04_23_39_145Z-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
Here's my package.json
{
"name": "collection-generator-app",
"version": "1.0.0",
"description": "",
"engines": {
"node": "10.15.2",
"npm": "6.4.1"
},
"main": "index.js",
"scripts": {
"dev": "node server.js",
"start": "next start",
"build": "next build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#shopify/koa-shopify-auth": "^3.1.18",
"#shopify/koa-shopify-graphql-proxy": "^2.1.5",
"#shopify/polaris": "^3.11.0",
"#zeit/next-css": "^1.0.1",
"apollo-boost": "^0.3.1",
"dotenv": "^7.0.0",
"graphql": "^14.1.1",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.0",
"js-cookies": "^1.0.4",
"koa": "^2.7.0",
"koa-session": "^5.10.1",
"next": "^8.0.3",
"react": "^16.8.4",
"react-apollo": "^2.5.3",
"react-dom": "^16.8.4"
}
}

You should have a closing tag for the div tag in your fetch-query.js file.
If you already did that, commit the changes and push to heroku.
Usually, you can do :
git add .
git commit -m "fix closing tag"
git push heroku master
But it depends on how you configured your git.
If you want to keep the div tag, take a look at the Fragments API

According to the logs, you're missing a closing html div tag.
Solutions:
delete the on line 32, OR
Add after line 32 or where you deem that the should end.
Then follow the commands #Nino wrote:
git add .
git commit -m "fix closing tag"
git push heroku master
That's it. :)
It's also recommended you include /node_modules in your .gitignore. Also, include your version here in your package json. Some modules like heroku work best with node 8.0 +

Related

ESLint: Failed to load config "next/babel"

I'm facing this problem deploying my site on vercel from my Github repo.
Here is my complete vercel log file.
[22:42:45.867] Cloning github.com/hammadsohail/ecommerce_sanity_stripe
(Branch: main, Commit: e24ccfc) [22:42:46.012] Previous build cache
not available [22:42:46.658] Cloning completed: 790.981ms
[22:42:46.946] Running "vercel build" [22:42:47.589] Vercel CLI 28.9.0
[22:42:47.997] Running "install" command: npm install --legacy-peer-deps... [22:43:00.681] [22:43:00.681] added 331 packages, and audited 332 packages in 12s [22:43:00.681]
[22:43:00.681] 82 packages are looking for funding [22:43:00.682]
run npm fund for details [22:43:00.683] [22:43:00.683] found 0
vulnerabilities [22:43:00.708] Detected Next.js version: 13.0.6
[22:43:00.713] Detected package-lock.json generated by npm 7+...
[22:43:00.714] Running "npm run build" [22:43:01.111] [22:43:01.111]
ecommerce#0.1.0 build [22:43:01.111] > next build [22:43:01.111] [22:43:01.480] info - Loaded env from /vercel/path0/.env
[22:43:01.665] Attention: Next.js now collects completely anonymous
telemetry regarding usage. [22:43:01.666] This information is used to
shape Next.js' roadmap and prioritize features. [22:43:01.667] You can
learn more, including how to opt-out if you'd not like to participate
in this anonymous program, by visiting the following URL:
[22:43:01.668] https://nextjs.org/telemetry [22:43:01.668]
[22:43:01.956] info - Linting and checking validity of types...
[22:43:02.455] error - ESLint: Failed to load config "next/babel" to
extend from. Referenced from: /vercel/path0/.eslintrc.json
[22:43:02.463] info - Creating an optimized production build...
[22:43:02.518] info - Disabled SWC as replacement for Babel because
of custom Babel configuration ".babelrc"
https://nextjs.org/docs/messages/swc-disabled [22:43:03.248] info -
Using external babel configuration from /vercel/path0/.babelrc
[22:43:08.424] Failed to compile. [22:43:08.424] [22:43:08.424]
./components/Navbar.jsx [22:43:08.425] Module not found: Can't resolve
'next/Link' in '/vercel/path0/components' [22:43:08.425]
[22:43:08.425] Import trace for requested module: [22:43:08.425]
./components/Navbar.jsx [22:43:08.425] ./components/index.js
[22:43:08.425] [22:43:08.426] ./lib/client.js [22:43:08.426] Module
not found: Can't resolve '#sanity/Client' in '/vercel/path0/lib'
[22:43:08.426] [22:43:08.426] Import trace for requested module:
[22:43:08.426] ./lib/client.js [22:43:08.426] [22:43:08.426]
[22:43:08.426] > Build failed because of webpack errors [22:43:08.465]
Error: Command "npm run build" exited with 1
Also in my Vscode its giving me
error:error - ESLint: Failed to load config "next/babel" to extend
from. Referenced from: C:\Users\hammad
sohail\Desktop\ecommerce\Ecommerce.eslintrc.json
My packages.json:
{
"name": "ecommerce",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#babel/core": "^7.17.9",
"#sanity/client": "^3.2.0",
"#sanity/image-url": "^1.0.1",
"#stripe/stripe-js": "^1.25.0",
"canvas-confetti": "^1.5.1",
"next": "12.1.0",
"next-sanity-image": "^3.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
"stripe": "^8.209.0"
},
"devDependencies": {
"#babel/preset-react": "^7.18.6",
"eslint": "8.13.0",
"eslint-config-next": "12.1.4",
"next": "13.0.6"
}
}
My .eslintrc:
"extends":["next/babel","next/core-web-vitals"]
I am trying to deploy my site on vercel. Anyone has this similar issue?

heroku deploy not working when local build works fine - NodeJS Timeout

Title says it really - i can build locally but it fails to deploy. Has an issue with Timeout - not sure how to force this to work?
Here's my package.json, and the logs afterwards.
I tried adding Timeout by running a yarn install but then it triggered some other dependency issues with node-gyp
Many thanks for any tips!
Package.json
{
"name": "api",
"homepage": ".",
"version": "0.0.1",
"private": true,
"scripts": {
"lint": "eslint .",
"dev": "NODE_ENV=development nodemon --watch '**/*' -e ts,tsx,js --ignore 'src/**/*.spec.ts' --exec 'ts-node --project ./tsconfig.json' src/server.ts",
"start": "node ./dist/server.js",
"start:redis": "docker-compose up -d",
"build": "NODE_ENV=production tsc"
},
"engines":{
"node":"14.15.5",
"npm": "6.14.11",
"yarn": "1.22.15"
},
"license": "MIT",
"main": "dist/server.js",
"devDependencies": {
"#types/cookie": "^0.4.0",
"#types/puppeteer": "^5.4.4",
"#types/ramda": "^0.27.44",
"#types/redis": "^2.8.31",
"#types/user-agents": "^1.0.2",
"#typescript-eslint/eslint-plugin": "^4.19.0",
"#typescript-eslint/parser": "^4.19.0",
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0",
"nodemon": "^2.0.12",
"prettier": "~2.2.1",
"tslib": "^2.0.0",
"typescript": "^4.0.0"
},
"dependencies": {
"axios": "^0.21.1",
"body-parser": "^1.19.0",
"chalk": "^4.1.2",
"cookie": "^0.4.1",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-async-router": "^0.1.15",
"express-query-boolean": "^2.0.0",
"node-fetch": "^2.6.1",
"puppeteer": "^10.2.0",
"puppeteer-extra": "^3.1.18",
"puppeteer-extra-plugin-adblocker": "^2.11.11",
"puppeteer-extra-plugin-stealth": "^2.7.8",
"ramda": "^0.27.1",
"redis": "^3.1.2",
"user-agents": "^1.0.738",
"util": "^0.12.4"
}
}
Build logs
>
-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 14.15.5
engines.npm (package.json): 6.14.11
engines.yarn (package.json): 1.22.15
Resolving node version 14.15.5...
Downloading and installing node 14.15.5...
npm 6.14.11 already installed with node
Resolving yarn version 1.22.15...
Downloading and installing yarn (1.22.15)
Installed yarn 1.22.15
-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build
-----> Installing dependencies
Installing node modules (package.json)
> puppeteer#10.4.0 install /tmp/build_e4061cb3/node_modules/puppeteer
> node install.js
> nodemon#2.0.13 postinstall /tmp/build_e4061cb3/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
added 477 packages from 392 contributors and audited 479 packages in 31.801s
76 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
-----> Build
Running build
> api#0.0.1 build /tmp/build_e4061cb3
> NODE_ENV=production tsc
node_modules/puppeteer/lib/types.d.ts(3644,28): error TS2694: Namespace 'NodeJS' has no exported member 'Timeout'.
node_modules/puppeteer/lib/types.d.ts(6489,71): error TS2583: Cannot find name 'BigInt'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2020' or later.
node_modules/puppeteer/lib/types.d.ts(6894,28): error TS2694: Namespace 'NodeJS' has no exported member 'Timeout'.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! api#0.0.1 build: `NODE_ENV=production tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the api#0.0.1 build 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.LPsTK/_logs/2021-10-13T12_15_23_280Z-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
The problem seems to be missing types, here are two possible fix:
Install #types/node as a devDependencies. This package contains types for NodeJS, including the Timeout type.
Edit your tsconfig.json to set skipLibCheck to true:
{
"compilerOptions": {
"skipLibCheck": true
}
}
This will ignore type errors in d.ts files (your error come from node_modules/puppeteer/lib/types.d.ts so it should fix it).

Firebase functions won't deploy after adding NPM package

Background: I recently (attempted) to add Taiko to my Firebase web app. Taiko is a browser-automation npm package, like Puppeteer. Maybe relevant: it downloads Chromium to work.
Problem: now none of my functions will deploy.
Question beyond getting past this specific issue, my more general question is, "what am I missing in this workflow?" / "How can I avoid this problem in the future?"
Error Message: (bold mine, highlighting stuff that might be relevant)
Build failed: {"error": {"canonicalCode": "INVALID_ARGUMENT", "errorMessage": "`npm_install` had stderr output:\n/workspace/node_modules/fs-extra/lib/mkdirs/make-dir.js:86\n } catch {\n ^\n\nSyntaxError: Unexpected token {\n at createScript (vm.js:80:10)\n at Object.runInThisContext (vm.js:139:10)\n at Module._compile (module.js:617:28)\n at Object.Module._extensions..js (module.js:664:10)\n at Module.load (module.js:566:32)\n at tryModuleLoad (module.js:506:12)\n at Function.Module._load (module.js:498:3)\n at Module.require (module.js:597:17)\n at require (internal/module.js:11:18)\n at Object. (/workspace/node_modules/fs-extra/lib/mkdirs/index.js:3:44)\nnpm ERR! code ELIFECYCLE\nnpm ERR! errno 1\nnpm ERR! taiko#1.0.7 install: `node lib/install.js`\nnpm ERR! Exit status 1\nnpm ERR! \nnpm ERR! Failed at the taiko#1.0.7 install script.\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR! /builder/home/.npm/_logs/2020-04-19T14_36_20_217Z-debug.log\n\nerror: `npm_install` returned code: 1", "errorType": "InternalError", "errorId": "02C3A7B5"}}
package.json
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"lint": "eslint .",
"serve": "firebase serve --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "8"
},
"dependencies": {
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.3.0",
"node-fetch": "^2.6.0",
"stripe": "^7.14.0",
"taiko": "^1.0.6",
"bufferutil": "^4.0.1",
"utf-8-validate": "^5.0.2"
},
"devDependencies": {
"eslint": "^5.12.0",
"eslint-plugin-promise": "^4.0.1",
"firebase-functions-test": "^0.1.6"
},
"private": true
}
What I've done so far:
created a Taiko test function in index.js, requireing Taiko.
added Taiko to package.json
ran npm install in functions folder
received message
npm WARN ws#7.2.3 requires a peer of bufferutil#^4.0.1 but none is installed.
npm WARN ws#7.2.3 requires a peer of utf-8-validate#^5.0.2 but none is installed.
You must install peer dependencies yourself.
following which, npm installed both of the above packages in /functions
This is the same basic procedure I followed to create a Stripe function in my index.js, and had no issues.
EDIT: Taiko 1.07, Node 12.16.2, npm 6.9.0, firebase-tools cli 8.1.1
Any insights appreciated!
From the Taiko team on Github:
This error generally happens on version < node 10 indirectly because of the fs-extra package.
Firebase cloud functions uses node 8 by default. Please try setting the expermental node 10 as mentioned in the documentation at
https://firebase.google.com/docs/functions/manage-functions#set_nodejs_version
So, the specific answer was to set the Node engine to "10" in the Firebase project package.json file.
And, the more general answer to "what I am missing in this workflow", is
when running packages in a remote environment, make sure that the runtimes of that environment match up with your local development environment, or the behavior might differ.
Use the appropriate version of node for the packages in your project, not necessarily the latest one.

Error when building my electron app

I'm stuck with a problem when building my Node JS/electron app with electron-builder. It works perfectly when running npm start. But, when I execute the command build -w (for windows) it fails with this log.
Here is my JSON file:
{
"name": "Munshiiii",
"version": "1.0.0",
"description": "This is a short Description of the project",
"main": "index.js",
"scripts": {
"start": "electron .",
"dist": "build -w"
},
"author": "Hicham Dbiza",
"license": "ISC",
"devDependencies": {
"electron": "1.7.8",
"electron-prebuilt": "^1.4.13"
},
"dependencies": {
"asar": "^0.13.0",
"cradle": "^0.7.1",
"fs": "0.0.1-security",
"git": "^0.1.5",
"jquery": "^3.2.1",
"jsdom": "^11.3.0",
"loke-ipc": "^1.0.5",
"mongodb": "^2.2.33",
"node-couchdb": "^1.2.0",
"pouchdb": "^6.3.4",
"pouchdb-replication-stream": "^1.2.9",
"scanner.js": "^1.0.0"
},
"build":{
"appId": "com.hicham.dbiza.faizan",
"win":{
"target": "nsis",
"icon": "build/Munshiiii.ico"
}
}
}
for this project Im using:
fs
pouchdb
electron
jquery
....
I already used electron-packager and it works almost fine with one problem: See this picture, which means all links inside the js files (e.g: fs.readFileSync('./assets/state','utf8')) won't work.
I have also added some native js click and keypress listeners... could that be a problem?
My electron version is 1.7.8.
I appreciate your help.
Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
if you are using Npm
do just simple steps terminal:
1 npm install yarn -g
2 yarn
3 yarn pack
Read this Blog (reactJS in electronApp with .exe file)
Have you installed electron-builder? You don't have it in your package.json. Then I would propose to use the electron-builder command, as recommended by the authors.
Run npm install electron-builder --save-dev and change your dist command to run just electron-builder. Since electron-builder per default build for the current running OS, it's not necessary to send the -w flag. If you still experience problems, try to set the following env variable to get a better stack trace:
DEBUG=electron-builder,electron-builder:*
Edit after getting more information from the comments:
According to this issue at GitHub your first issue seemed to be caused by permission errors, and was solved with running as administrator.
From electron-builders README:
Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
Try to remove your node_modules folder and run
npm install yarn -g && yarn && yarn pack
First I installed electron-builder with following line
npm install -g electron-builder
then I created a build folder in the root of my project, containing the .ico file with the app logo. then I wrote following parts in my package.json
"build": {
"appId": "your.app.id",
"productName": "Your final product name"
}
and
"scripts": {
"start": "electron .",
"pack": "build --dir"
}
That was everything I needed. I opend my root folder in the terminal and executed
build -w
That created an folder called dist, with an unpacked version of my app plus an installer for the app.

npm start error with create-react-app

I have a project who I didn't touch for 2 weeks. I take it back and now when I try to run npm start I got this error.
> react-scripts start
sh: react-scripts: command not found
npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.7.0
npm ERR! npm v3.10.3
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! UpScore#0.6.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the UpScore#0.6.0 start script 'react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the UpScore package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs UpScore
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls UpScore
npm ERR! There is likely additional logging output above.
node 6.7.0
npm 3.10.3
mac sierra 10.12
package.json
{
"name": "UpScore",
"version": "0.6.0",
"private": true,
"devDependencies": {
"react-addons-test-utils": "^15.3.1",
"react-scripts": "0.4.1",
"react-test-renderer": "^15.3.1",
"redux-logger": "^2.6.1"
},
"dependencies": {
"#yoshokatana/medium-button": "^1.1.0",
"axios": "^0.14.0",
"bcrypt": "^0.8.7",
"bcrypt-nodejs": "0.0.3",
"bcryptjs": "^2.3.0",
"body-parser": "^1.15.2",
"connect-flash": "^0.1.1",
"cookie-parser": "^1.4.3",
"draft-js": "^0.8.1",
"draft-js-editor": "^1.7.2",
"draft-js-export-html": "^0.4.0",
"ejs": "^2.5.2",
"email-verification": "^0.4.5",
"express": "^4.14.0",
"express-session": "^1.14.1",
"flexboxgrid": "^6.3.1",
"highlight.js": "^9.6.0",
"immutable": "^3.8.1",
"katex": "^0.6.0",
"lodash": "^4.15.0",
"markdown-it-mathjax": "^1.0.3",
"material-ui": "^0.15.4",
"medium-editor": "^5.22.0",
"minutes-seconds-milliseconds": "^1.0.3",
"moment": "^2.15.0",
"moment-duration-format": "^1.3.0",
"mongod": "^1.3.0",
"mongodb": "^2.2.9",
"mongoose": "^4.6.0",
"monk": "^3.1.2",
"morgan": "^1.7.0",
"normalize.css": "^3.0.3",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-markdown": "^2.4.2",
"react-medium-editor": "^1.8.1",
"react-redux": "^4.4.5",
"react-redux-form": "^0.14.5",
"react-rich-markdown": "^1.0.1",
"react-router": "^2.7.0",
"react-router-redux": "^4.0.5",
"react-tap-event-plugin": "^1.0.0",
"react-tinymce": "^0.5.1",
"redux": "^3.6.0",
"redux-form": "^6.0.5",
"redux-form-material-ui": "^4.0.1",
"redux-promise-middleware": "^4.0.0",
"redux-thunk": "^2.1.0",
"reselect": "^2.5.3",
"screenfull": "^3.0.2"
},
"scripts": {
"start": "react-scripts start",
"start:prod": "pushstate-server build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"server": "cd client/api && pm2 start server.js --watch",
"proxy": "http://128.199.139.144:3000"
},
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
}
I try to clone my repos too and get the same error. If someone can give me some way to find what happen. Thank you
Author of Create React App checking in.
You absolutely should not be installing react-scripts globally.
You also don't need ./node_modules/react-scripts/bin/ in package.json as this answer implies.
If you see this:
npm ERR! UpScore#0.6.0 start: `react-scripts start`
npm ERR! spawn ENOENT
It just means something went wrong when dependencies were installed the first time.
I suggest doing these three steps:
npm install -g npm#latest to update npm because it is sometimes buggy.
rm -rf node_modules to remove the existing modules.
npm install to re-install the project dependencies.
This should fix the problem.
If it doesn't, please file an issue with a link to your project and versions of Node and npm.
It seems like you don't have react-scripts in your global environment.
Two possibility are available here :
npm install -g react-scripts
or in your package.json change your script part like this :
"scripts": {
"start": "./node_modules/react-scripts/bin/react-scripts.js start",
"start:prod": "pushstate-server build",
"build": "./node_modules/react-scripts/bin/react-scripts.js build",
"test": "./node_modules/react-scripts/bin/react-scripts.js test --env=jsdom",
"eject": "./node_modules/react-scripts/bin/react-scripts.js eject",
"server": "cd client/api && pm2 start server.js --watch",
"proxy": "http://128.199.139.144:3000"
},
Yes you should not install react-scripts globally, it will not work.
I think i didn't use the --save when i first created the project (on another machine), so for me this fixed the problem :
npm install --save react react-dom react-scripts
incase you happened to be so unlucky like me that spent three(3) days in a row trying to solve this problem every solution proposed here failed me ... create a .env file in your project root and add this code SKIP_PREFLIGHT_CHECK=true. Good luck
This is to help others completely new to react and who area having problems just starting a first app even though they did a fresh install and try using npm install and the other fixes I saw around the forums.
Running it on Windows 10 with all the latest npm create-react-app installed and got failure after failure on a simple npm start in a simple my-app demo folder.
Spent a long time with what looks similar to the OP error at first but is slightly different. This starts with ERRNO 4058 and continues with code 'ENOENT' syscall: 'spawn cmd', path: ''cmd' ...
Eventually worked out from github create-react-app forum that a quick fix for this is registering cmd in the "path" variable. To do this go to System Properties>Environment variables. Click on path variable edit and and add new entry of C:\Windows\System32. Restart CMD prompt and I was good to go.
As Dan said correctly,
If you see this:
npm ERR! UpScore#0.6.0 start: `react-scripts start`
npm ERR! spawn ENOENT
It just means something went wrong when dependencies were installed the first time.
But I got something slightly different because running npm install -g npm#latest to update npm might sometimes leave you with this error:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for npm#lates
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
so, instead of running npm install -g npm#latest, I suggest running the below steps:
npm i -g npm //which will also update npm
rm -rf node_modules/ && npm cache clean // to remove the existing modules and clean the cache.
npm install //to re-install the project dependencies.
This should get you back on your feet.
I might be very late to answer this question but this is what has worked for me and it might help someone to get back on the development track!
nvm install v12.0 // You may need to install nvm, if not already done
rm -rd node_modules/
npm cache clean --force
npm install
Cheers!!
For me it was simply that I hadn't added react-scripts to the project so:
npm i -S react-scripts
If this doesn't work, then rm node_modules as suggested by others
rm -r node_modules
npm i
I have faced the following issue.
Please find the solution:
Add "C:\Windows\System32" to the global PATH environment variable.
Check whether the environment variables has been created for nodejs,npm and composer. if not create one
Run your app.
I had the same error when running
npm start
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! protest-app#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the protest-app#0.1.0 start script.
I broke my head on several tabs and applying Solutions from other devs and nothing.
Until, even using Ubuntu, I closed my vscode and restarted my pc and all my problems were solved. (kkkk zueira) just this one.
add environment variables in windows
C:\WINDOWS\System32
C:\Program Files\nodejs
C:\Program Files\nodejs\node_modules\npm\bin
C:\WINDOWS\System32\WindowsPowerShell\v1.0
C:\Users{your system name without curly
braces}\AppData\Roaming\npm
these 5 are must in path.
and use the latest version of node.js
I solve this issue by running following command
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
hope it helps
Add .env file with "SKIP_PREFLIGHT_CHECK=true" than npm start
I fix this using this following command:
npm install -g react-scripts
it is simple but the first time it takes time a few steps to set !!!
you have the latest version on node.
go to the environment variable and set the path "%SystemRoot%\system32".
run cmd as administrator mode.
write command npm start.
i ran npm install inside the project
then npm start
it worked
just delete the "node_module" file and if its seems somehow grey in folder that means it's not there just close the vs code and re open then
install npm with "npm install".
it's possible that conflict with other library, delete node_modules and again npm install.
This occurs when the node_modules gets out of sync with package.json.
Run the following at the root and any sub service /sub-folder that might have node_modules folder within it.
rd node_modules /S /Q
npm install
It occurred to me but none of the above worked.
events.js:72
throw er; // Unhandled 'error' event
^
npm ERR! UpScore#0.6.0 start: `react-scripts start`
npm ERR! spawn ENOENT
Error: spawn ENOENT
at errnoException (child_process.js:1000:11)
at Process.ChildProcess._handle.onexit (child_process.js:791:34)
This happens because you might have installed react-scripts globally.
To make this work...
Go to your C:\Users\<USER>\AppData\Roaming
Delete npm and npm-cache directories... (don't worry you can install npm globally later)
Go back to your application directory and remove node_modules folder
Now enter npm install to install the dependencies (delete package-lock.json if its already created)
Now run npm install --save react react-dom react-scripts
Get it started with npm start
This should get you back on track... Happy Coding
My issue was stemming from permission issues. I solved mine by following this
https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
Type unset HOST in your terminal.
I have created react project locally. This reason of occurring this problem (for me) was that I didn't use sudo before npm and it needs root access (
> sudo npm start
PS1: For windows users, the powershell or command line should be run as administrator)
PS2: If use want to solve the root access issue, you can see this post.
for me I create a .env file in the project root and after that I write one line SKIP_PREFLIGHT_CHECK=true. It work for me

Categories