repeated EJSONPARSE error - node.js

"npm run react-dev" command gives this jsonparse error occurs repeatedly.
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected token in JSON at position 595 while parsing ' {
npm ERR! "name": "reactnodetutorial",
npm ERR! "vers'
Tried the following but none worked.
1) deleted all directories and files and restarted this project from the scratch like building architecture and installing dependencies
2) deleted all contents in package.json file and copied the tutorial example's package.json contents which is perfect and pasted it to mine
3) update node and npm to the latest version
4) npm init and reinstall dependencies
5) npm cache clean --force
6) rm -f package-lock.json
How to possibly fix this.
My package.json file is as follows:
{
"name": "reactnodetutorial",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.18.2",
"express": "^4.16.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"webpack": "^4.1.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -d --watch",
"start": "node ./server/index.js",
"build": "webpack -p",
"react-dev": "webpack -d --watch",
"server-dev": "nodemon server/index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/shinjehere/reactNodeTutorial.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/shinjehere/reactNodeTutorial/issues"
},
"homepage": "https://github.com/shinjehere/reactNodeTutorial#readme"
}

Related

Why do i get an error react-scripts: not found on github actions CI

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

how to run react project with web pack which contains frontend and backend

I am having problem with running the project, the project is contains the frontend(react) and backend(node) how should run the frontend side for the project
{
"version": "1.0.0",
"description": "' open source project",
"main": "index.js",
"dependencies": {
"bootstrap": "^4.5.2",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reactstrap": "^8.6.0"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-proposal-function-bind": "^7.11.5",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"scripts": {
"serve": "node src/backend/main.js",
"watch": "webpack --mode=development -d --watch",
"build": "webpack --mode=production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": { "type": "git", "url": "" },
"keywords": [],
"author": "",
"license": "ISC",
"bugs": { "url": "" },
"homepage": ""
}
If you want to run frontend(React) and backend(Node) at the same time install concurrently and nodemon.
npm i concurrently
npm install -g nodemon
then at the package.json file add concurrently to run both frontend and backend together.
"scripts": {
"start": "node server/index.js",
"backend": "nodemon server/index.js",
"frontend": "npm run start --prefix client",
"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
},
If you want to run only your frontend go to client folder and open your terminal and type
npm start or yarn start

ES5: 'use strict' within dependency fails to be minified by Heroku

I am trying to deploy on Heroku, where I'm given the following error:
remote: Failed to minify the code from this file:
remote: ./node_modules/webhoseio/webhoseio.js:13
Upon inspecting this dependency, I found that it uses the ES5 'use strict'; declaration. How can I have Heroku compile this dependency?
EDIT: Package.json file
{
"name": "stocks-app",
"version": "1.0.0",
"description": "Mern Demo",
"main": "server.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "babel-node server.js",
"start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
"client": "cd client && npm run start",
"install": "cd client && yarn install",
"build": "cd client && npm run build",
"heroku-postbuild": "npm run build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"concurrently": "^4.1.0",
"nodemon": "^1.18.9"
},
"dependencies": {
"alphavantage": "^1.2.0",
"axios": "^0.18.0",
"brain.js": "^1.6.0",
"cors": "^2.8.5",
"dotenv": "^6.2.0",
"express": "^4.16.3",
"if-env": "^1.0.4",
"mdbreact": "^4.8.5-patch.1",
"mongoose": "^5.4.0",
"newsapi": "^2.4.0",
"request": "^2.88.0",
"webhoseio": "^1.0.2"
}
}
I resolved this by turning off minification in my Webpack config. Instead of using the CRA-preconfigured Webpack ES-Lint loader, I installed the HTML-Loader and set loader to that. Following, I set minimize to false. Here's how:
module: {
rules: [
{
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
minimize: false,
},
loader: require.resolve('html-loader'),
},
],}}

Babel and Deploy Nodejs to Google App Engine

I'm a newbie nodejs. I have a trouble about deploying nodejs app to google app engine. This is my error, I have been trying to fix it but it's not work. I've installed babel.
Bug
Updating service [default]...failed.
ERROR: (gcloud.app.deploy) Error Response: [9]
Application startup error:
restaurant_api#1.0.0 prestart /app
npm run -s build
You have mistakenly installed the babel package, which is a no-op in Babel 6.
Babel's CLI commands have been moved from the babel package to the babel-cli package.
npm uninstall babel
npm install --save-dev babel-cli
This is my package.json
"main": "dist",
"scripts": {
"dev": "NODE_ENV=development nodemon -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "babel src -s -D -d dist --presets es2015,stage-0",
"start": "NODE_ENV=production pm2 start dist",
"prestart": "npm run -s build",
"lint": "eslint src",
"test": "echo \"Error: no test specified\" && exit 1",
"babel-version": "babel --version"
},
"eslintConfig": {
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module"
},
"env": {
"node": true
},
"rules": {
"no-console": 0,
"no-unused-vars": 1
}
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.23.0",
"body-parser": "^1.17.0",
"express": "^4.15.0",
"express-jwt": "^5.1.0",
"jsonwebtoken": "^7.3.0",
"mongoose": "^4.8.5",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^4.0.0",
"pm2": "^2.4.2"
},
"devDependencies": {
"babel-cli": "^6.23.0",
"babel-eslint": "^7.1.1",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"eslint": "^3.16.1"
}
Problem is quite simple, if you notice clearly GAE, does not install dev-dependencies. So move your dev-deps above inside deps , like I did and babel no found error is gone.
{
"name": "scraping",
"version": "0.3.0",
"description": "Starter project for an ES6 RESTful Express API",
"main": "dist",
"scripts": {
"dev": "nodemon -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "babel src -s -D -d dist --presets es2015,stage-0",
"start": "node dist",
"prestart": "npm run -s build",
"test": "eslint src"
},
"eslintConfig": {
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module"
},
"env": {
"node": true
},
"rules": {
"no-console": 0,
"no-unused-vars": 1
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/developit/express-es6-rest-api.git"
},
"author": "Saransh Sharma <jason#developit.ca>",
"license": "MIT",
"dependencies": {
"body-parser": "^1.13.3",
"compression": "^1.5.2",
"cors": "^2.7.1",
"express": "^4.13.3",
"morgan": "^1.8.0",
"resource-router-middleware": "^0.6.0",
"#jonstuebe/scraper": "^0.1.4",
"babel-cli": "^6.9.0",
"babel-core": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"eslint": "^3.1.1",
"nodemon": "^1.9.2"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"eslint": "^3.1.1",
"nodemon": "^1.9.2"
},
"bugs": {
"url": "https://github.com/developit/express-es6-rest-api/issues"
},
"homepage": "https://github.com/developit/express-es6-rest-api#readme",
"keywords": [
"scraper",
"product",
"from",
"amazon"
]
}
The clue is in the error message.
In your devDependencies section, you already have babel-cli included.
However, your dependencies section still has a reference to "babel": "^6.23.0".
Either remove this line, or replace it with babel-cli, leaving you with:
"dependencies": {
"babel-cli": "^6.23.0",
"body-parser": "^1.17.0",
"express": "^4.15.0",
"express-jwt": "^5.1.0",
"jsonwebtoken": "^7.3.0",
"mongoose": "^4.8.5",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^4.0.0",
"pm2": "^2.4.2"
},
You need to install babel-cli globally, i.e. run the command "npm install babel-cli -g" as part of your build npm script, or create a pre-install script that install it if you want to keep it more organized in case you need to add more things later on.
"scripts": {
"dev": "NODE_ENV=development nodemon -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "npm install bable-cli -g && babel src -s -D -d dist --presets es2015,stage-0",

behavior differs for npm install and npm install -g

In order to build frontend sources on Windows 7 with gulp.js I have a package.json file with node_modules dependencies defined in it:
{
"name": "custom-repo-name",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"directories": {
"doc": "doc"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"gulp-concat": "^2.5.2",
"gulp-stylus": "^2.0.3",
"gulp-uglify": "^1.2.0",
"rimraf": "^2.3.4"
},
"devDependencies": {
"gulp": "^3.9.0",
"gulp-concat": "^2.5.2",
"gulp-rev": "^4.0.0",
"gulp-stylus": "^2.0.3",
"gulp-uglify": "^1.2.0",
"gulp-watch": "^4.2.4",
"rimraf": "^2.3.4"
}
}
For some reason when I run
npm install
the dependencies are installed locally into .\node_modules folder and gulp command runs properly.
But when I run
npm install -g,
as I can see from the output, a part of dependencies is missing to be installed and running gulp command fails with an error of failed load of dependencies (gulp-uglify.js for instance).
What's wrong?

Resources