throw new JS_Parse_Error(message, filename, line, col, pos) when using usemin-cli

user_7852473 0
Viewed 1088

I am using usemin-cli to minify my html files. I have installed all the required dependencies to use usemin-cli. I am trying the following usemin npm script to complete this task: -

"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'",
    "clean": "rimraf dist",
    "copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
    "imagemin": "imagemin img/* --out-dir dist/img",
    "usemin": "usemin index.html -d dist --htmlmin -o dist/index.html && usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html",
    "build": "npm run clean && npm run copyfonts && npm run imagemin && npm run usemin"
  }

It only minifies the index.html and contactus.html and gives an error at aboutus.html. Here is aboutus.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie-edge">
  <title>Ristorante Con Fusion: About Us</title>
  <!-- build:css css/main.css -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="./node_modules/bootstrap-social/bootstrap-social.css">
  <link rel="stylesheet" href="./css/styles.css">
  <!-- endbuild -->
</head>

<body>
 <!-- here is my body code using bootstrap and html -->
  <!-- build:js js/main.js -->
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/popper.js/dist/popper.min.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="./js/scripts.js"></script>
  <!-- endbuild -->
</body>

</html>

Here is index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie-edge">
  <!-- build:css css/main.css -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="./node_modules/bootstrap-social/bootstrap-social.css">
  <link rel="stylesheet" href="./css/styles.css">
  <!-- endbuild -->
  <title>Ristorante Con Fusion</title>
</head>

<body>

    <!-- build:js js/main.js -->
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="./js/scripts.js"></script>
  <!-- endbuild -->
</body>

</html>

Error running after the npm run build:

> usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html


undefined:1625
    throw new JS_Parse_Error(message, filename, line, col, pos);
    ^
SyntaxError: Unexpected token: name (o)
    at JS_Parse_Error.get (eval at <anonymous> (/home/neo/Desktop/full stack coursera/Web Ui with bootstrap(course1)/bootstrap4-starter/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 aboutus.html -d dist --htmlmin -o dist/aboutus.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!     /home/neo/.npm/_logs/2019-01-17T10_30_03_425Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! confusion@1.0.0 build: `npm run clean && npm run copyfonts && npm run imagemin && 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.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/neo/.npm/_logs/2019-01-17T10_30_03_525Z-debug.log

What should I do to solve this?

npm-scripts npm build
4 Answers

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 (only add another *.html file, but now we'll trying with only one *.html file)

"usemin": "usemin index.html -d dist --htmlmin -o dist/index.html",

to

"usemin": "usemin index.html -d dist -o dist/index.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.

user_94636740

I was getting this same error because I was using arrow functions and jQuery, so I removed the arrow functions (removing jQuery code will work too) and this ran with no errors:

    "usemin": "usemin aboutus.html -d dist -o dist/aboutus.html --htmlmin true && usemin contactus.html -d dist -o dist/contactus.html --htmlmin true && usemin index.html -d dist -o dist/index.html --htmlmin true"
user_34900230

Assalamu Alaykum .

In your aboutus.html file you include wrong path for popper.min.js file

Here is your wrong path

 <script src="./node_modules/popper.js/dist/popper.min.js"></script>

It should be.

<script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>

You can check your index.html files popper.min.js source path and it was correct.

user_124097900

I had the same problem, and Assalamu Alaykum solution worked for me. It was not a .js scripts file problem, it was just the popper script.

Changing to

<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>

worked for me.

user_146204400
Related