How to fix NPM EJSONParse in this package.json file? - node.js

After I prepared for auto scripts and installing few packages to automate my tasks, I got the following error:
npm ERR! file C:\Users\windw\Desktop\bootstrap4\package.json
npm ERR! code EJSONPARSE
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected string in JSON at position 455 while parsing '{
npm ERR! JSON.parse "name": "confusion",
npm ERR! JSON.parse "version": '
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
Below is my package.json file
{
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "node-sass -o css/ css/",
"watch:scss": "onchange \"css/*.scss\" -- npm run scss",
"watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\""
"clean": "rimraf dist",
"copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
"imagemin": "imagemin img/* --out-dir='dist/img'",
"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist --htmlmin -o dist/index.html",
"build": "npm run clean && npm run imagemin && npm run copyfonts && npm run usemin"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cssmin": "^0.4.3",
"htmlmin": "0.0.7",
"lite-server": "^2.3.0",
"node-sass": "^4.7.2",
"onchange": "^6.1.0",
"parallelshell": "^3.0.2",
"rimraf": "^2.6.2",
"uglifyjs": "^2.4.11",
"usemin-cli": "^0.5.1"
},
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-social": "5.1.1",
"font-awesome": "4.7.0",
"jquery": "^3.4.1",
"popper.js": "1.12.9"
}
}
How can I fix the NPM EJSONParse error?

You are missing a comma at the end of the 12th line in your package.json file.
Presently it looks like this:
"watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\""
It should look like this:
"watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\"",
Note the comma at the end of the line.

This error occurred when you are somehow missing "," comma. and when you use comma in last line if not required also it happens. If this issue showed, you need to review your pakage.json file.

Related

Bootstrap 5 with usemin -cli 0.6.0 and uglify-js 3.16.2

name: Cannot uglify bootstrap.min.js file
about: Error when I try to uglify the bootstrap.min.js file
Uglify version ("uglify-js": "3.16.2",)
Bootstrap Version - bootstrap 5
Code in the contactus.html
<!-- build:js js/main.js -->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- endbuild -->
JavaScript output or error produced.
when I try to uglify the bootstrap.min.js file Below error will be shown.
D:\Web Dev\Full-Stack Web Development with React Specialization\Front-End Web UI Frameworks and Tools Bootstrap 4\week01\Introduction To Bootstrap\Bootstrap4\conFusion>npm run usemin
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
> confusion#1.0.0 usemin
> usemin contactus.html -d dist --htmlmin -o dist/contactus.html
undefined:1625
throw new JS_Parse_Error(message, filename, line, col, pos);
^
JS_Parse_Error [SyntaxError]: Unexpected token: punc ([)
at JS_Parse_Error.get (eval at <anonymous> (D:\Web Dev\Full-Stack Web Development with React Specialization\Front-End Web UI Frameworks and Tools Bootstrap 4\week01\Introduction To Bootstrap\Bootstrap4\conFusion\node_modules\usemin\node_modules\uglify-js\tools\node.js:27:1), <anonymous>:86:23)
at getStackString (node:internal/util/inspect:1213:37)
at formatError (node:internal/util/inspect:1283:15)
at formatRaw (node:internal/util/inspect:962:14)
at formatValue (node:internal/util/inspect:817:10)
at inspect (node:internal/util/inspect:347:10)
at afterInspector (node:internal/errors:782:14) {
filename: 'node_modules\\bootstrap\\dist\\js\\bootstrap.min.js',
line: 6,
col: 357,
pos: 600
}
My package.json file if you need the versions of my packges
{
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "node-sass -o css/ css/",
"watch:scss": "onchange \"/css/*.scss\" -- npm run scss",
"watch:all": "parallelshell \"npm run lite\" \"npm run watch:scss\"",
"clean": "rimraf dist",
"copyfonts": "copyfiles -f node_modules/#fortawesome/fontawesome-free/webfonts/* dist/fonts",
"imagemin": "imagemin img/* -o dist/img",
"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html"
},
"author": "Ginura Ransika",
"license": "ISC",
"devDependencies": {
"cssmin": "^0.4.3",
"htmlmin": "^0.0.7",
"lite-server": "^2.3.0",
"node-sass": "^7.0.1",
"onchange": "^7.1.0",
"parallelshell": "^3.0.1",
"rimraf": "^3.0.2",
"uglify-js": "^3.16.2",
"usemin-cli": "^0.6.0"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^6.1.1",
"#popperjs/core": "^2.11.5",
"bootstrap": "^5.2.0-beta1",
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.6.0",
"sass": "^1.53.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/GinuraRansika/Coursera-UI-Framework.git"
},
"bugs": {
"url": "https://github.com/GinuraRansika/Coursera-UI-Framework/issues"
},
"homepage": "https://github.com/GinuraRansika/Coursera-UI-Framework#readme"
}
ERROR
I have the bootstrap.min.js script in my contactus.html file and I wanted to use (usemin-cli) package to that contactus.html
when I run the usemin I am getting the above error when uglify-js trying to uglify the bootstrap.min.js file is there any solution for this?
I was facing the same issue. It's because uglifyjs doesn't support ES6 syntax used in bootstrap 5.
Solved it just removing bootstrap current version and installing bootstrap#4.6.0
npm remove bootstrap
npm install bootstrap#4.6.0

Failed npm run dev with Tailwindcss

I just follow instruction from this youtube video https://youtu.be/lhCGoQkya5Q but i cant running npm run dev
in terminal:
PS C:\Users\Turtle\Desktop\My Site> npm run dev
npm ERR! Missing script: "dev"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Turtle\AppData\Local\npm-cache\_logs\2022-02-22T19_13_01_984Z-debug-0.log
Project\css\tailwind.css
#tailwind base;
#tailwind components;
#tailwind utilities;
package.json
{
"name": "my-site",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.23",
"vite": "^2.8.4"
}
}
You have to add a new key in your scripts key
"scripts": {
"dev": "npx tailwindcss -i ./css/tailwind.css -o ./dist/style.css --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
./css/tailwind.css is your sour; change the name according.ly
./dist/style.css is your dist path/filename
--watch is to keep running and watch when you change something in your code

Postinstall of module is executed before postinstall of sub-module

Edit:
I'm asking how to install it from GitHub, not npm, that the question.
In case you want to know why: I'm working on some private projects and don't what t publish the code. This leads to the code being in a private repository, not published on npm.
Original post:
Trying to install a module from GitHub (it is in typescript, thus I need a compilation script [postinstall]). It seems to fail because one of the module dependencies is also on GitHub, and that postinstall script is not waited on by the current postinstall script.
Old GitHub issue that sounds related: https://github.com/npm/npm/issues/5001
Yes, like the issue, I also use the same dependency in the main project as the module does.
Program
Version
node
v16.1.0
npm
7.11.2
npm info run newton#1.0.1 postinstall node_modules/newton tsc -d -p .
npm info run nodemon#2.0.7 postinstall node_modules/nodemon node bin/postinstall || exit 0
npm info run rendery#2.0.0 postinstall node_modules/rendery tsc -d -p .
npm info run nodemon#2.0.7 postinstall { code: 0, signal: null }
npm timing build:run:postinstall:node_modules/nodemon Completed in 157ms
npm info run newton#1.0.1 postinstall { code: 0, signal: null }
npm timing build:run:postinstall:node_modules/newton Completed in 2409ms
npm info run rendery#2.0.0 postinstall { code: 2, signal: null }
npm timing reify:rollback:createSparse Completed in 2864ms
npm timing reify:rollback:retireShallow Completed in 0ms
npm timing command:install Completed in 47807ms
npm verb stack Error: command failed
npm verb stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\#npmcli\promise-spawn\index.js:64:27)
npm verb stack at ChildProcess.emit (node:events:365:28)
npm verb stack at maybeClose (node:internal/child_process:1067:16)
npm verb stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm verb pkgid rendery#2.0.0
npm verb cwd C:\Users\Elias\git\natrias
npm verb Windows_NT 10.0.19043
npm verb argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "i" "--verbose" "--force"
npm verb node v16.1.0
npm verb npm v7.11.2
npm ERR! code 2
npm ERR! path C:\Users\Elias\git\natrias\node_modules\rendery
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c tsc -d -p .
npm ERR! src/2d/CanvasRenderyContext2D.ts(1,29): error TS2307: Cannot find module 'newton/2d/ReadonlyVector2' or its corresponding type declarations.
npm ERR! src/2d/CanvasRenderyContext2D.ts(2,21): error TS2307: Cannot find module 'newton/2d/Vector2' or its corresponding type declarations.
npm ERR! src/2d/ReadonlyRenderyContext2D.ts(1,29): error TS2307: Cannot find module 'newton/2d/ReadonlyVector2' or its corresponding type declarations.
npm ERR! src/2d/RenderyContext2D.ts(1,29): error TS2307: Cannot find module 'newton/2d/ReadonlyVector2' or its corresponding type declarations.
npm verb exit 2
npm timing npm Completed in 48318ms
npm verb code 2
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Elias\AppData\Local\npm-cache\_logs\2021-05-12T16_19_34_975Z-debug.log
Note that rendery postinstall starts before newton postinstall completes.
Newton package.json
{
"name": "newton",
"version": "1.0.1",
"description": "",
"scripts": {
"lint": "eslint '*/**/*.ts'",
"lint:fix": "eslint '*/**/*.ts' --fix",
"postinstall": "tsc -d -p .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0"
},
"dependencies": {
"typescript": "^4.2.4"
}
}
Rendery package.json
{
"name": "rendery",
"version": "2.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint '*/**/*.ts'",
"lint:fix": "eslint '*/**/*.ts' --fix",
"postinstall": "tsc -d -p ."
},
"keywords": [],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint": "^7.25.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-typescript-sort-keys": "^1.6.0"
},
"dependencies": {
"newton": "github:Elias-Graf/newton#main",
"typescript": "^4.2.4"
}
}
It's not a good practice to publish unbuilt packages. I recommend changing the postinstall script into a prepare script so it builds the package before publishing it.
{
"name": "newton",
"version": "1.0.1",
"description": "",
"scripts": {
"lint": "eslint '*/**/*.ts'",
"lint:fix": "eslint '*/**/*.ts' --fix",
"prepare": "tsc -d -p .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0"
},
"dependencies": {
"typescript": "^4.2.4"
}
}
{
"name": "rendery",
"version": "2.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint '*/**/*.ts'",
"lint:fix": "eslint '*/**/*.ts' --fix",
"prepare": "tsc -d -p ."
},
"keywords": [],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint": "^7.25.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-typescript-sort-keys": "^1.6.0"
},
"dependencies": {
"newton": "github:Elias-Graf/newton#main",
"typescript": "^4.2.4"
}
}
This would fix your issue.

How to correct this error? usemin not found

I tried to run npm run build after installing rimraf,copyfiles,imagemin, usemin-cli, cssmin, uglifyjs and htmlmin. And then editing package.json file.
But I got the error
sh: 1: usemin: not found
Here is my Package.json file
{
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "npx node-sass -o css/ css/",
"watch:scss": "npx onchange 'css/*.scss' -- npm run scss",
"watch:all": "concurrently 'npm run watch:scss' 'npm run lite'",
"clean": "node_modules/rimraf/bin.js dist",
"copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
"imagemin": "imagemin img/* --out-dir='dist/img'",
"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist --htmlmin -o dist/index.html",
"build": "npm run clean && npm run copyfonts && npm run imagemin && npm run usemin"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cssmin": "^0.4.3",
"htmlmin": "0.0.7",
"lite-server": "^2.3.0",
"node-sass": "^4.7.2",
"onchange": "^3.3.0",
"parallelshell": "^3.0.1",
"rimraf": "^2.6.2",
"uglifyjs": "^2.4.11",
"usemin-cli": "^0.5.1"
},
"dependencies": {
"bootstrap": "^4.4.1",
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"popper.js": "^1.12.9"
}
}
Tried Google, But Didn't found anything. I am using ubuntu
I think npm is not able to read the path.
I added the path
node_modules/.bin/usemin
In Place of usemin in the script above.
It Worked.
this is a problem with the usemin-cli version, upgrade to version 0.6.0, I'm doing the same course and it works

npm run start with "DEBUG=*" issue on Windows

{
"name": "apokidsi",
"version": "0.717",
"contributors": [
],
"dependencies": {
"angular": "1.5.8",
"angular-cookies": "1.5.8",
"angular-messages": "1.5.8",
"angular-ui-router": "1.0.0-beta.3",
"debug": "^3.0.0",
"flag-icon-css": "2.8.0",
"jquery": "3.2.1",
"moment": "2.18.1",
"moment-timezone": "0.5.13",
"node-fetch-npm": "^2.0.1"
},
"scripts": {
"clean": "gulp clean",
"start": "DEBUG=true HOST=localhost:4200 gulp server",
}
}
Here is the package.json file.
When I run npm run start
I get this message
'DEBUG' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
After checking all the possibilities we have to use the cross-env dependencies.
so install npm install cross-env --save-dev
and in package.json
"Start": " cross-env-shell DEBUG=True HOST=dev.example.com gulp server"

Resources