Troubleshooting issue: pesky popper.js error arises when integrating Bootstrap 4 into the Require

As I integrate Bootstrap 4 into my RequireJS configuration for my application, a warning arises:

An error occurred while loading the resource from: “”.

accompanied by this error message:

Error: Script error for "popper.js", required by: bootstrap https://requirejs.org/docs/errors.html#scripterror

I'm facing difficulties resolving this issue when using Bootstrap 4 with RequireJS/AMD. Any suggestions on how to tackle it?

require = {
    paths: {
        jquery: '/app/assets/vendor/jquery/dist/jquery.min',
        popper: '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min',
        bootstrap: '/app/assets/vendor/bootstrap/dist/js/bootstrap.min',
    }
}

I've also attempted directly adding the <script> tag for popper.js in the source code before including my compiled JavaScript, but it doesn't seem to solve the problem.

Any insights on what step I may be overlooking?

javascripttwitter-bootstrapbootstrap-4requirejspopper.js

Answer №1

To resolve the issue, I implemented the following solution...

Utilizing npm, I added popper.js by running npm install popper.js

then made changes to my webpack configuration:

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

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

Is it possible to use HTML text as a CSS selector with JavaScript?

I've been searching for a solution to this issue but haven't found anything that works for me. Check out this code on jsfiddle. Person1 and Person2 both have class="from" and the CSS selector is .from so it applies to both. However, I want it ...

javascriptjquerycss

Creating a new array by combining data from two arrays: a step-by-step guide

Here is an array I have: response=[ { "mId": "4a993417-3dae-4a85-bb2e-c535d7fda6d7", "title": "test2", "score": "4", "id": "91ce873f- ...

javascriptarraystypescript

Populate the AngularJS scope with a dynamically generated array

My Angular Application is functioning properly with <script> var app = angular.module('MyApp', []); app.controller('myCtrl', function ($scope, $sce) { $scope.urls = [ { "url": $sce.t ...

javascriptangularjsecmascript-5

arrange the elements in an array list alphabetically by name using the lodash library

Is there a way to alphabetically sort the names in an array list using JavaScript? I attempted to achieve this with the following code: const sample = [ { name: "AddMain", mesg: "test000" }, { name: "Ballside", ...

javascripttypescriptlodash

I am consistently encountering the error message "Invalid hook call."

While attempting to create a navbar using react.js, I encountered the following error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This issue may arise due to: Mismatching versions of React and the rend ...

javascriptreactjs

Tips for handling the final row of a CSV file in Node.js with fast-csv before the 'end' event is triggered

After using fast-csv npm, I noticed that in the code provided below, it processes the last row (3rd row) of CSV data only after triggering the "end" event. How can this issue be resolved? ORIGINAL OUTPUT : here processing request here processing re ...

javascriptnode.jscsvnpmcallback

Unlocking the power of dynamic stacking and unstacking in bar charts using chart.js

Looking to customize a barchart to toggle between stacked bars and bars behind each other? Keep in mind that the x-axes should be stacked behind each other. useEffect(() => { if (!myChart) return; if (barStack) { ...

javascriptreactjschart.js

Having trouble integrating select2 with geonames?

I'm currently experiencing difficulties when trying to integrate select2 with geonames. Although I am able to generate a list of cities, I am unable to select any as a valid option. HTML <select id="cities" name= "cities"> <option value=" ...

javascriptjqueryajaxjquery-select2geonames

I am looking for an alternative approach to retrieve the data from the controller in case of success instead of the method provided in the code below

In this code snippet, I am looking for an alternative way to retrieve data from the controller upon successful execution, rather than checking it as data.msg. I want to avoid using strings or boolean values like SuccessWithPass. Controller snippet: if ...

javascriptjqueryajaxasp.net-mvc-3

The height of the div container exceeds 100% stretch

I am trying to incorporate a scrollbar for a specific div container. Here is the current code snippet that I have: $(document).ready(() => { for (let i = 0; i < 100; i++) { const newDiv = (`<div>Log Item</div>`); $("#logsCont ...

javascripthtmlcss

Attempting to demonstrate how to handle a duplicate entry error within a MySQL database through the use of Express.js and React.js

I have developed a CRUD application that is functioning perfectly. Now, I am working on adding validation to it in order to notify users when they try to insert an entry that already exists in the database. This is what I have implemented so far: console ...

javascriptmysqlnode.jsreactjsexpress

Mastering the Art of Card Sizing in Bootstrap

I am having trouble resizing the cards deck. I have a total of 3 cards that I am trying to adjust to fit into a column size of col-3. However, despite using bootstrap 4.1x, it seems like my code is not working as intended. <link href="https://maxcdn. ...

htmlwebdesign-patternsbootstrap-4

Error message: Handlebars failed to sanitize the string - SyntaxError: The string literal is missing

Currently, I am developing an application using Publii CMS, which utilizes Handlebars. Specifically, I am constructing a Vue app within the positions.hbs file. To create a JSON object, I am extracting a lengthy string from the CMS using Handlebars. {{#get ...

javascriptvue.jshandlebars.js

What is the reason that an individual would stop another from executing by using $(document).ready(function() { ?

While I understand that it's supposed to be possible to run multiple $(document).ready(function() { on my page, for some reason I'm having trouble doing so. I appreciate those who have pointed out that it should work, but I'm really looking ...

javascriptjquery

Tips for ensuring the security of your code in node.js

Here is a snippet from my app.js that deals with managing connections: var connections = []; function removeConnection(res) { var i = connections.indexOf(res); if (i !== -1) { connections.splice(i, 1); } } I make a call to removeConn ...

javascriptmultithreadingnode.js

Issue with Element.update() method malfunctioning on IE browser is causing concern

Utilizing the Element.update() method from the prototype: [ ... ] var link_1 = new Element('a').update( '<' ); var link_2 = new Element('a').update( '<<' ); [ ... ] Encountering a unique issue only in IE: ...

javascriptinternet-explorerprototypejs

Controller encountering undefined rootScope in AngularJS

I have developed a basic AngularJS application with two template pages: login.html and content.html. The pages are loaded dynamically into the index.html using ng-view and routing functionalities. Everything is running smoothly. Take a look at my index.h ...

javascriptangularjsangularjs-rootscope

Enzyme/Jest Testing Issue - Invariant Violation: The specified container is not a valid DOM element

I have recently started exploring unit testing and I am encountering the following error: Invariant Violation: Target container is not a DOM element. After reviewing my app.js file, I suspect that the issue lies with the line ReactDOM.render(, document.get ...

javascriptreactjstestingenzymejestjs

Discovering when the DOM has finished rendering in AngularJS with ng-repeat

I am looking for a way to trigger an alert or message upon completion of rendering in my HTML DOM using AngularJS, specifically when dealing with multiple ng-repeats. HTML Code: <body> <div ng-controller="Ctrl"> <div ng-repeat= ...

javascriptjqueryangularjshtml

Using angularjs ng-repeat in combination with owl-carousel

<div class="owl-carousel"> <div ng-repeat="items in itemlist"> <a href="series.html"><img ng-src="{{items.imageUrl}}" /></a> </div> <div> <a href="series.html><img src="http://p ...

javascriptangularjsangularjs-directiveowl-carousel