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
Related
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
I try to use Husky's pre-commit and lint-staged.
Those are installed:
"husky": "^5.1.3",
"lint-staged": "^10.5.4",
In package.json I have:
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
"isready": "npm run format && npm run lint && npm run build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "npm test",
}
},
"lint-staged": {
"./src/*.{js,jsx,ts,tsx}": [
"npm run format",
"npm run lint",
"git add"
]
},
If I run npm run lint, currently I have 2 problems (1 error, 1 warning). So when I run git commit, I don't expect to be able to commit, right? But I can proceed and finish the commit.
What's wrong?
Update:
I downgraded husky to 4.3.8:
"husky": "^4.3.8",
"lint-staged": "^10.5.4",
Inside package.json, in my scripts I have:
"prettier": "prettier '**/*.{js,jsx,ts,tsx}' --write",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
And:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{ts,tsx,js,jsx}": [
"npm run prettier",
"npm run lint",
"git add"
]
},
When I do a commit, Husky is still not fired off. What's wrong?
Update 2:
I couldn't get Husky 4 to work so I upgraded to version 6:
npm install husky#6 --save-dev \
&& npx husky-init \
&& npm exec -- github:typicode/husky-4-to-6 --remove-v4-config
Now it works fine.
The only thing I can't get to work is lint-staged.
I added the hook npx husky add .husky/pre-commit "lint-staged"
But then I get .husky/pre-commit: line 4: lint-staged: command not found? How do I get lint-staged working with Husky version 6?
Making lint-staged working with Husky version 6 by adding:
// .husky/pre-commit
npm run pre-commit
and:
// package.json
{
"scripts": {
"pre-commit": "lint-staged"
}
}
Based on this husky github issue, just do these steps to make it work(we did it and it is working fine):
npx husky-init
yarn
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
yarn add #commitlint/config-conventional #commitlint/cli --dev
.commitlintrc.json:
{
"extends": ["#commitlint/config-conventional"]
}
.lintstagedrc:
{
"src/**/*.+(js|json|ts|tsx)": [
"eslint"
],
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
}
.husky/pre-commit:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn pre-commit-lint
Finally, add pre-commit-lint script to package.json:
{
"name": "pwa-react-scaffold",
"version": "0.1.0",
"private": true,
"author": "SeyyedMahdi Hassanpour <SeyyedKhandon#gmail.com>",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"analyze": "yarn build && source-map-explorer 'build/static/js/*.js'",
"lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx .",
"check-types": "tsc",
"prettier": "prettier --ignore-path .gitignore \"src/**/*.+(js|jsx|json|ts|tsx)\"",
"format": "yarn prettier --write",
"check-format": "yarn prettier --list-different",
"validate": "npm-run-all --parallel check-types check-format lint build",
"prepare": "husky install",
"pre-commit-lint": "yarn check-types && yarn lint-staged"
},
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.8",
"node-sass": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"source-map-explorer": "^2.5.2",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.3",
"workbox-broadcast-update": "^5.1.3",
"workbox-cacheable-response": "^5.1.3",
"workbox-core": "^5.1.3",
"workbox-expiration": "^5.1.3",
"workbox-google-analytics": "^5.1.3",
"workbox-navigation-preload": "^5.1.3",
"workbox-precaching": "^5.1.3",
"workbox-range-requests": "^5.1.3",
"workbox-routing": "^5.1.3",
"workbox-strategies": "^5.1.3",
"workbox-streams": "^5.1.3"
},
"devDependencies": {
"#commitlint/cli": "^12.1.1",
"#commitlint/config-conventional": "^12.1.1",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-jest-dom": "^3.8.0",
"eslint-plugin-testing-library": "^4.1.0",
"eslint-plugin-unused-imports": "^1.1.1",
"husky": "^6.0.0",
"lint-staged": "^10.5.4",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1"
}
}
#meez As you install husky#^5.1.3 version, Husky changed the configuration step after 5.0.0.
Configure Husky#^5.0.0:
npm i husky
npx husky install
husky install .config/husky
husky add .config/husky/pre-commit "npm test"
Link: https://dev.to/typicode/what-s-new-in-husky-5-32g5
or you can simply degrade your husky version :)
another option: Use npx in the pre-commit config
.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
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.
Browsersync: when I use it locally it's all right. When I deploy on Heroku, I have this warning:
Couldn't open browser (if you are using BrowserSync in a headless
environment, you might want to set the open option to false)
this is my package.json:
"scripts": {
"clean": "rimraf dist/{css/*,js/*,images/*}",
"autoprefixer": "postcss -u autoprefixer -r dist/css/*",
"scss": "node-sass --output-style compressed -o dist/css src/scss",
"lint": "eslint src/js || true",
"lint-scss": "stylelint src/scss/*.scss --syntax scss || true",
"uglify": "mkdirp dist/js -p && uglifyjs src/js/*.js -m -c -o dist/js/main.min.js",
"imagemin": "imagemin src/images/* -o dist/images",
"serve": "browser-sync start --server --files \"dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html\"",
"build:css": "run-s lint-scss scss autoprefixer",
"build:js": "run-s lint uglify",
"build:images": "run-s imagemin",
"build": "run-s build:*",
"watch:css": "onchange \"src/scss\" -- run-s build:css",
"watch:js": "onchange \"src/js\" -- run-s build:js",
"watch:images": "onchange \"src/images\" -- run-s build:images",
"watch": "run-p serve watch:*",
"postinstall": "run-s build watch"},
"devDependencies": {
"autoprefixer": "^9.0.1",
"browser-sync": "^2.12.8",
"eslint": "^5.2.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"imagemin-cli": "^3.0.0",
"mkdirp": "^0.5.1",
"node-sass": "^4.9.2",
"npm-run-all": "^4.1.3",
"onchange": "^4.1.0",
"postcss-cli": "^6.0.0",
"rimraf": "^2.5.4",
"stylelint": "^9.4.0",
"uglify-es": "^3.3.10"},
"main": ".eslintrc.js"
}
I read that I have to set the open option to false, but I do not understand where and how.
Thanks
Try replacing serve script with this:
"serve": "browser-sync start --no-open --server --files \"dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html\""
Hello and thank you for reading this.
I would like to load the examples in local WebStorm IDE. In particular I am trying to load the loaders example:
https://github.com/FNNDSC/ami/tree/dev/examples/viewers_upload
The problem I get is the default imports look like thay are not properly set:
So if I try to run npm install
I get this error:
Can not install Node.js module: "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" install base/core/core.utils
Standard error:
npm ERR! code ENOLOCAL
npm ERR! Could not install from "base\core\core.utils" as it does not contain a package.json file.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\YonePC\AppData\Roaming\npm-cache\_logs\2018-01-16T18_50_29_864Z-debug.log
I thought it was related to my package.json but it looks like it has all the dependencies set up:
{
"name": "ami.js",
"version": "0.0.23-dev",
"main": "build/ami.js",
"keywords": [
"ami",
"ami.js",
"three.js",
"webgl",
"dicom",
"nifti",
"awesome",
"medical",
"imaging",
"xtk",
"nrrd",
"vtk",
"stl",
"trk"
],
"author": {
"name": "Nicolas Rannou",
"email": "nicolas#eunate.ch",
"url": "https://eunate.ch"
},
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://fnndsc.github.io/ami"
},
"config": {
"threeVersion": "87",
"amiCDN": "https://cdnjs.cloudflare.com/ajax/libs/ami.js",
"gaKey": "UA-39303022-3",
"babel": "--module-bind js=babel-loader --colors --display-error-details"
},
"dependencies": {
"dicom-parser": "1.7.3",
"image-JPEG2000": "OHIF/image-JPEG2000#master",
"jpeg-lossless-decoder-js": "1.2.3",
"math-float32-to-binary-string": "^1.0.0",
"nifti-reader-js": "v0.5.3",
"nrrd-js": "^0.2.1",
"pako": "1.0.1",
"three": "0.87.0"
},
"scripts": {
"build:ami": "webpack --config webpack.config.build.js",
"build:ami:prod": "cross-env NODE_ENV=production yarn build:ami",
"build:clean": "rimraf -rf build/*",
"build:clean:hot": "rimraf -rf build/*.hot-update.*",
"dev:ami": "webpack --config webpack.config.build.js --hot --watch --colors",
"dist:ami": "yarn build:clean && yarn build:ami && yarn build:ami:prod && yarn doc",
"dist:examples": "node ./scripts/buildDist.js && node ./scripts/router.js examples deploy",
"dist:clean": "rimraf -rf dist/*",
"analyze:ami": "cross-env NODE_WEBPACK_ANALYZE=true yarn build:ami",
"analyze:ami:prod": "cross-env NODE_WEBPACK_ANALYZE=true yarn build:ami:prod",
"clean": "yarn build:clean && yarn dist:clean",
"example": "node ./scripts/router.js examples",
"lesson": "node ./scripts/router.js lessons",
"gen:index:examples": "node ./scripts/genIndexFiles.js examples",
"gen:index:examples:ga": "cross-env NODE_GA=true node ./scripts/genIndexFiles.js examples",
"gen:index:lessons": "node ./scripts/genIndexFiles.js lessons",
"gen:index:lessons:cdn": "node ./scripts/genIndexFiles.js lessons cdn",
"test": "karma start",
"lint": "eslint src/**/*.js",
"doc": "jsdoc -p -r -R README.md -c jsdoc.json -d dist/doc src",
"ami": "yarn lint && yarn dist:ami && yarn test",
"deploy": "yarn dist:clean && yarn build:clean && yarn dist:ami && yarn dist:examples && gh-pages -d dist"
},
"devDependencies": {
"babel-cli": "latest",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-runtime": "^6.26.0",
"compression-webpack-plugin": "^1.0.1",
"cross-env": "^3.2.3",
"eslint": "latest",
"eslint-config-google": "latest",
"gh-pages": "latest",
"glslify": "5.1.0",
"jasmine-core": "latest",
"jsdoc": "jsdoc3/jsdoc#master",
"karma": "latest",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "latest",
"karma-sinon": "^1.0.5",
"karma-spec-reporter": "latest",
"karma-webpack": "^2.0.4",
"live-server": "^1.1.0",
"puppeteer": "^0.13.0",
"rimraf": "^2.6.1",
"rollup-plugin-node-builtins": "^2.1.2",
"shelljs": "latest",
"sinon": "^2.0.0",
"uglifyjs-webpack-plugin": "^1.0.0-beta.3",
"webpack": "^3.7.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-watch-livereload-plugin": "^0.0.1"
},
"engines": {
"node": ">=6.9.0"
}
}
In addition I looked and tried to find if I would have Node modules isntalled, but as it does not appear in the package.json they are not installed by default:
However I do have node installed:
Microsoft Windows [Versión 6.3.9600]
(c) 2013 Microsoft Corporation. Todos los derechos reservados.
C:\Users\YonePC\WebstormProjects\ATLAS>node -v
v8.9.0
If I execute index.html it says on the developer console:
'Uncaught SyntaxError: Unexpected identifier'
And the line being said is:
import CoreUtils from 'base/core/core.utils';
If I try to redo the imports with IDE's help, this is the result:
After executing the updated index.html:
viewers_upload.js:5 Uncaught SyntaxError: Unexpected identifier
And the line referenced is:
import HelpersLut from "../../src/helpers/helpers.lut";
If I try to use the web CDN library version with:
I need to delete all imports and use the web library version's classes as follows:
I can execute the index.html and trigger the loader:
However I can not do it infinitely because of the class to parseUrl is being on the disk library and not in the web library:
The console says:
'Uncaught ReferenceError: CoreUtils is not defined
at HTMLInputElement.readMultipleFiles (viewers_upload.js:429)
readMultipleFiles # viewers_upload.js:429'
Could you help me please?
Thank you for your time reading this.
EDIT: I am still trying to get that example working on local. So far I have been able to include AMI library's files linking for example:
viewers_upload.js
let dataUrl = CoreUtils.parseUrl(evt.target.files[i].name);
Instead of the normal import generated by the IDE:
import CoreUtils from "../../src/core/core.utils";
Using a direct load:
index.html
<script src="../../src/core/core.utils.js"></script>
However I can not keep doing this infinitely because of the core.utils.js uses import so then the browser reports an error:
Uncaught SyntaxError: Unexpected identifier
In line:
import Validators from './core.validators';
Could you help me please???
To run an example you should:
start dev server: yarn example <example name> (in your case yarn example viewers_upload)
go to localhost:8081 in your web browser