Messing up Bootstrap ES6 JavaScript code leads to the problem of the "Modal redeclared" error

Encountering the issue of "Modal redeclared" when attempting to minify Bootstrap 4 JS code using Grunt. Discovered these are due to ES6 so found the ES6 Uglify for Grunt. Current dependencies include:

"bootstrap": "~4.0.0",
"grunt": "~1.0.1",
"grunt-contrib-uglify-es": "git://github.com/gruntjs/grunt-contrib-uglify.git#harmony",

Amidst others, encountering the following error message:

>> Uglifying source source/js/site.js failed.
Warning: Uglification failed.
Modal redeclared.
Line 1808 in source/js/site.js

The line causing trouble is const Modal = (($) => {

Struggling with how to successfully compile or minify these JS files with Grunt. Any suggestions on potential solutions?

Your insights and assistance are greatly appreciated.

npmgruntjsbootstrap-4es6-modulesgrunt-contrib-uglify

Answer №1

My problem arose from the order in which the files were compiling. I have now corrected it according to what I observed:

  • The 'Util' file should be placed first
  • 'Index' should come last
  • 'Popover' must load after 'Tooltip'

"build": {
   "src": [
   "node_modules/bootstrap/js/src/util.js",
    "node_modules/bootstrap/js/src/alert.js",
    "node_modules/bootstrap/js/src/button.js",
    "node_modules/bootstrap/js/src/carousel.js",
    "node_modules/bootstrap/js/src/collapse.js",
    "node_modules/bootstrap/js/src/dropdown.js",
    "node_modules/bootstrap/js/src/modal.js",
    "node_modules/bootstrap/js/src/scrollspy.js",
    "node_modules/bootstrap/js/src/tab.js",
    "node_modules/bootstrap/js/src/tooltip.js",
    "node_modules/bootstrap/js/src/popover.js",
    "node_modules/bootstrap/js/src/index.js",
    "source/assets/js/*.js"
    ],
   "dest": "source/js/site.js"
}

Hooray!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to troubleshoot NPM installation issues related to gyp ERR

I have tried most of the suggestions found online, but I am still encountering an error when trying to install opencv and serialport. My current setup includes Visual Studio 2019 with C++ Desktop environment and Python 3.7. npm ERR! command C:\Windows ...

javascriptnpmnode-gyp

Understanding the functionality of imports within modules imported into Angular

I have been scouring through the documentation trying to understand the functionality of the import statement in JavaScript, specifically within the Angular framework. While I grasp the basic concept that it imports modules from other files containing expo ...

javascriptangulartypescriptnpm

Is there a way to transfer the opts/flags used in the npm install command to the postinstall scripts?

Is there a way to pass options and flags from the 'npm install' command to post-install scripts? For example, if I run npm install X --some-param=some-value, where package X has a post-install script located at ./scripts/postinstall.js, how can ...

node.jsnpmnpm-scripts

Can webpack be used to import a bundled webpack and library separately in a project?

I am currently working on a module that utilizes d3, but I do not wish to include d3 in the bundled package or bind it to the window object. This module will be installed in another project using npm as a git dependency. In my module setup, I have configur ...

npmwebpackumd

I've decided to create a new Angular app using Yeoman. I've noticed that there are more installed Node modules than what is listed in the package.json file. Is this typical

As a newcomer to Yeoman, I've observed that the node modules in my projects are resembling those in other projects and also the node modules at the root path for node on my laptop. I'm uncertain whether this is due to an issue with my setup or if ...

angularjsnode.jsnpmyeomanpackage.json

Is it possible to run my NPM CLI package on CMD without needing to install it globally beforehand?

I've created a new NPM package, complete with its own set of CLI commands. Let's call this package xyz, and let's imagine it's now live on npmjs.com Now, picture a user who installs this package in their project by executing npm insta ...

javascriptnode.jsnpmnpxpackage-development

What is the best way to implement a user queue system for a "private beta" launch using Node.js?

We are in the process of developing a new web application using Node.js. Like many applications, we want to control the number of users who can sign up initially to facilitate smooth testing and scaling. The plan is for users to sign up with an email addre ...

node.jspostgresqloauthnpmtwitter-oauth

An open port could not be located on the x86_64-conda_cos6-linux-gnu system

Recently delved into learning React and encountered some challenges that I could use assistance with. I am in the midst of developing an application using this code snippet: npx create-react-app project-name Upon creating the application, I ran into issue ...

node.jsreactjsnpmnpm-installnpx

Error Handling with NPM and Rails in BrowserifyRails

Trying to launch a local application using ruby on rails has been a bit of a challenge. Initially, when attempting to start the local server, it raised an issue regarding nodejs, despite having successfully installed it. Now, the latest error message encou ...

ruby-on-railsrubynode.jsnpm

Node 10 is experiencing issues with unzipping files using adm-zip, unzipper, or yauzl, resulting

Recently, I've been attempting to incorporate a use case into my code where I need to unzip a zip file that exceeds the available disk space. My expectation was for the code to throw an ENOSPC error when this situation occurs. Despite trying multiple ...

node.jsnpmunzipadm-zip

What steps can be taken to resolve the issue with installing an npm package if it fails at the installation script for [email protected]?

While working on setting up a npm package for a project, I encountered an error during the installation process. The ngx-loader is required for this project. prebuild-install WARN install No prebuilt binaries found (target=11.14.0 runtime=node arch=x64 pl ...

node.jsnpmangular7npm-install

What is the best way to remove a global symlink in npm without impacting local dependencies?

As a developer of an npm package, I often need to use the local version of my package. To achieve this, I utilize the npm link command, which creates a global symlink to my package. However, once I am done working with my package, I need to remove this glo ...

node.jsnpm

Troubleshooting error in running Xamarin UI test on Visual Studio Mobile Center

When testing my Xamarin Forms Android app, I utilized Visual Studio Mobile Center. These were the steps I followed: 1. First, I installed node.js 2. Then, I carried out the following command: npm install -g mobile-center-cli I logged into the mobile ...

xamarinnpmxamarin.formsmobile-centervisual-studio-app-center

npm malfunctions following recent update

After updating npm with the command npm install -g npm@latest, I encountered an error when running any npm command, including npm --version. The error message reads: ERROR: npm v10.2.4 is known not to run on Node.js v14.15.4. This version of npm supports t ...

node.jsnpm

Protect an API with React utilizing CAS (Centralized Authentication Service) for front end sign in and Spring Boot for backend and making Rest API requests

Currently, I have successfully implemented CAS to secure the frontend of my React app using the package found here: https://www.npmjs.com/package/react-cas-client Now my aim is to secure the backend as well and restrict access to API calls from the app by ...

reactjsspringnpmsingle-sign-oncas

The bootstrap4 UI Framework Web project encountered an npm run build error

Hey, I'm in need of some assistance. Whenever I enter npm run build into my Windows 10 terminal, I encounter the following errors: 'imagemin' is not recognized as an internal or external command, operable program, or batch file. npm ER ...

deploymentnpmbuildnpm-scripts

npm installs an incorrect package version

Currently attempting to set up karma, and encountering issues while using the command npm i karma@^1.0.0. Instead of the latest version, npm is installing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="167d77645b72562738263826" ...

node.jsnpmsemantic-versioning

"Can you provide instructions on how to start the grunt server in the dist directory rather than the app

Once I run the command grunt build to compile my AngularJS application into the dist directory, I want to test it using grunt server. However, the issue is that grunt server ends up serving all the code from the app/ directory. It's important to note ...

angularjsgruntjsyeoman

Encountering a problem while attempting to utilize a package that requires the importing of a JSON file for internationalization (

As I integrate a package into my Next.js project (v13.4.3), I encounter an issue with a sub-dependency that provides translations via a JSON file. Upon compilation, the following error occurs: - info Collecting page data ..Error: Cannot find module '/ ...

node.jsreactjsnpmnext.js

Generate - Create 2 different versions of the web application

Currently, I am in the process of learning Grunt and exploring ways to generate 2 variations of an application with different configuration settings. My goal is to have one version where a boolean in a specific .js file is set to false, and another versio ...

javascriptgruntjsyeoman