I get the following error when running npm build - node.js

Question

{
"name": "confusion",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"lite-server": "^2.4.0",
"popper.js": "^1.12.9"
},
"devDependencies": {
"cssmin": "^0.4.3",
"htmlmin": "0.0.7",
"node-sass": "^4.7.2",
"onchange": "^3.3.0",
"parallelshell": "^3.0.2",
"rimraf": "^2.6.2",
"uglifyjs": "^2.4.11",
"usemin-cli": "^0.5.1"
},
"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/* -o 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"
}
}
C:\Users\username\Documents\coursera\Bootstrap4\conFusion>npm run build
> confusion#1.0.0 build C:\Users\username\Documents\coursera\Bootstrap4\conFusion
> npm run clean && npm run imagemin && npm run copyfonts && npm run usemin
> confusion#1.0.0 clean C:\Users\username\Documents\coursera\Bootstrap4\conFusion
> rimraf dist
> confusion#1.0.0 imagemin C:\Users\username\Documents\coursera\Bootstrap4\conFusion
> imagemin img/* -o dist/img
4 images minified
> confusion#1.0.0 copyfonts C:\Users\username\Documents\coursera\Bootstrap4\conFusion
> copyfiles -f node_modules/font-awesome/fonts/* dist/fonts
> confusion#1.0.0 usemin C:\Users\username\Documents\coursera\Bootstrap4\conFusion
> 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
undefined:1625
throw new JS_Parse_Error(message, filename, line, col, pos);
^
SyntaxError: Unexpected token: punc ({)
at JS_Parse_Error.get (eval at <anonymous> (C:\Users\username\Documents\coursera\Bootstrap4\conFusion\node_modules\usemin\node_modules\uglify-js\tools\node.js:27:1), <anonymous>:86:23)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! confusion#1.0.0 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`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the confusion#1.0.0 usemin 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! C:\Users\username\AppData\Roaming\npm-cache\_logs\2018-09-24T21_38_01_183Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! confusion#1.0.0 build: `npm run clean && npm run imagemin && npm run copyfonts && npm run usemin`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the confusion#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Answer 1

I am doing the same course and had the same errors. However, I was just able to fix it. I did this by reinstalling all dev dependencies and used the current versions, not the ones in the course.
I did also change the usemin command (according to the post here) to
"imagemin": "imagemin img/* --out-dir=dist/img",
However, it still did not work, so I checked all my files for errors using the following tools:
https://www.freeformatter.com/java-regex-tester.html for testing the html files; http://www.webtoolkitonline.com/javascript-tester.html, for testing the .js file and https://jsonlint.com/?json=, to test the package.json file for errors.
After I did correct all the files, the command "npm run build" did finally work. (I especially forgot to check the script.js file where I just copied the code from the html file that still contained the script tags)

Answer 2

You're probably using ES6 syntax but ES5 presets.
Add the babel-preset-es2015 dependency to fix this.
And also add 'es2015' in .babelrc file.
json
{
"presets": ["es2015"]
}

Answer 3

Follow the GitHub page of imagemin, it has the solution:
https://github.com/imagemin/imagemin-cli
Replace
"imagemin": "imagemin img/* -o dist/img",
with
"imagemin": "imagemin img/* --out-dir=dist/img",

Answer 4

the issue might be in your scripts.js file but first, try to do the
next test, step by step.
from your package.json ... change
"imagemin": "imagemin img/* -o dist/img",
to
"imagemin": "imagemin img/* --out-dir dist/img/",
and change (only add another *.html file, but now we'll trying with only one *.html file)
"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html",
to
"usemin": "usemin contactus.html -d dist -o dist/contactus.html --htmlmin true",
if doesn't work, keep the changes and try this
from your *.html ... change
<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- endbuild -->
to
<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- endbuild -->
<script src="js/scripts.js"></script>
run
npm run usemin
if see your dist folder and the complete path with css and js
folders and html files; the conclusion is, you need to check the
syntax of JavaScript from you scripts.js file.

Answer 5

I stuck to that error too for the same course task.
I was just able to fix it by only reinstalling usemin-cli, cssmin, uglify-js and htmlmin dev dependencies by the current versions without specify any by :
sudo npm install --save-dev usemin-cli cssmin uglify-js htmlmin
then
npm run build
then I found all the files including html which make the usemin problems inside dist folder.

Answer 6

Maybe it the error with the version try writing
npm install -g imagemin-cli
instead of
npm install -g imagemin-cli#"version"

Answer 7

I am running the same course, and after read, and search, I realize scripts.js is the winner, currently, the code looks like this:
$(document).ready(()=>
...
Just need to change to this:
$(function(){
...
Please, refer to jquery documentation :jQuery official

Answer 8

Thanks man, I was facing the same issues,
What i did is,
I ran individual components starting from imagemin. I had an error with it so I ran
sudo npm install imagemin imagemin-cli
next i ran usemin, and with individual html, i found that except index rest all htmls were fine so I used a html validator and found some errors in the html i fixed those errors and now everything worked.