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

Question

---

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?

Answer 1

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