Error: Bootstrap fails to load fonts when used with webpack

Struggling to configure webpack 4 for my project.

File structure required for bootstrap integration:

public
    css
    images
    js
    vendor
        bootstrap\dist
            css
            fonts
                glyphicons-halflings-regular.eot
                glyphicons-halflings-regular.svg
                glyphicons-halflings-regular.ttf
                glyphicons-halflings-regular.woff
                glyphicons-halflings-regular.woff2  
            js

Encountering an issue with webpack unable to locate "fonts" directory during build process, resulting in error. https://i.sstatic.net/zEjC4.png

javascriptwebpackbootstrap-4webpack-4

Answer №1

While working with Bootstrap 4, I encountered an issue related to the glyphicon font being dropped in this version. To resolve it, downgrading to version 3 or below proved to be a viable solution. https://i.sstatic.net/nwsnw.png

Alternatively, Font Awesome can serve as a replacement for glyphicons in Bootstrap 4. Looking for more information on Bootstrap 4 - Glyphicons migration?

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

What are the best ways to resolve the warning from webpack in Express?

I have set up webpack to bundle both the server and client side code... Below is my webpack configuration: const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin&a ...

javascriptangularwebpack

Convert epoch time to HHMM format using JavaScript

I have a specific variable that stores epoch time data. My goal is to showcase the time information in HHMM format. Below you can find the code I am currently using; function convertEpochTimeToDateObj(epoch_time) { var utcSeconds = epoch_time; va ...

javascriptnode.jsdatetimeepoch

Appium with Node.js (wd) becomes unresponsive when unable to locate element

Encountering an issue while using appium with nodejs (wd) and mocha, as there is a loading view in the android app (blackbox testing & I'm not the developer) that needs to be waited for its disappearance. Attempted the following solution: wd.addPromi ...

javascriptandroidnode.jsmocha.jsappium

How can I showcase a Google donut chart using an array of data in a React application?

I have created a doughnut chart that is supposed to take an array as data. However, when I input the array, nothing shows up on the chart. How can I create a chart with array data? sum.js ... const arr = []; arr.push({ key: capitalizeEachFirst ...

javascriptreactjs

Interactive audio control with HTML5 and JavaScript technology

I have a vision to enhance my HTML5 based digital comic book for iPad by adding sound effects using a simple play/pause button. Despite spending the entire day experimenting, my limited JavaScript skills are hindering my progress. Here is the link to the c ...

javascriptipadhtml

Concealing an element by using parentElement.getElementsByClassName to set the display property to none

I am attempting to hide a button that generates a new element upon being clicked (to then be replaced by a delete button), but I'm struggling to set the display property to "none" when trying to target the same element using parentElement and then ret ...

javascripthtml

What is the best way to create a directive that wraps the div elements utilized in an ng-repeat loop?

When working on my application, I utilize this HTML snippet for an ng-repeat: <div class="gridBody"> <div ng-class="{clicked: row.current == true}" ng-click="home.rowClicked($index)" ng-dblclick="ctrl.rowDoub ...

javascriptangularjsangularjs-directive

The error message "Trying to call zmq.zmqVersion as a function, but it's not a function" occured while attempting to import the ZeroMQ

My current project involves creating a react app that can subscribe to an IPC socket using JavaScript code. I chose to use npx create-react-app for this purpose. To handle the subscription, I decided to utilize the npm package zeromq. However, when instal ...

javascriptnode.jsreactjsnpmzeromq

Tips for incorporating CSS classes into a React component

Currently, I am iterating through an array of data to create a list. My goal is to add a CSS class when a specific list item is clicked. Using Iteration for List Creation let sportsList = allSports.sportList.map((sport) => { return ( <SportItem i ...

javascripthtmlcssreactjs

Easy method for generating a JavaScript dictionary using an array containing arrays

I have a collection of paired items, and I am looking to convert it into a dictionary. const collection = [['apple', 3], ['banana', 5]] const transformed = {'apple': 3, 'banana': 5} If I were using Python, I could ...

javascriptarraysdictionary

AngularJS seems to be ignoring CSS styles when displaying list items in the ng-repeat loop

After coming across a tutorial on creating round circles connected by a line in CSS, I decided to implement it myself. Interestingly, everything worked perfectly fine when I tested it with static HTML. However, when I tried to make it dynamic using Angular ...

javascripthtmlangularjscsstemplates

Error: Undefined Function [Thinkster.io's Angular Tutorial Chapter 4]

Currently working on the Angular Tutorial provided by Thinkster.io and enjoying every bit of it. However, I've hit a roadblock in Chapter 4 that seems impossible to overcome. Whenever I attempt to execute a Post or Delete action, I encounter the follo ...

javascriptangularjsyeoman

Having trouble connecting to my database in views with MongoDB using NodeJS Express

I'm running into an issue with accessing my database from one of the two views I created for my application. The app is built using Node.JS, Express, and MongoDB as the data store. Data is stored in a collection named entries with key-value pairs (dat ...

javascriptjsonnode.jsmongodbexpress

Creating a default parameter for a JavaScript AJAX request function

Utilizing XML AJAX to retrieve URLs for streaming media playback upon button click. To display a startup Tamil channel list by default, default parameter value must be set to 'Tamil'. <button type="button" onclick="loadDoc('Tamil')" ...

javascriptajax

What is the best way to transform extensive array information into a URL query parameter?

In my Angular TypeScript web app, I am working with an array containing lat/lng coordinates. const myArr = [ [lat, lng], [lat, lng], ...500 lines of data ] I would like to convert this array into a URL query parameter for users to share or revisit. ...

javascriptangulartypescriptmathquery-string

Running pug directly from the local node_modules directory

I'm currently attempting to run pug (/jade) from my node_modules directory, however I am unable to locate the executable within the node_modules/.bin folder. I am running MacOS 10.12.5 and installed pug using the "npm install --save pug" command. Is ...

javascriptnode.jsnpmpug

Iterate over the key-value pairs in a loop

How can I iterate through a key-value pair array? This is how I declare mine: products!: {[key: string] : ProductDTO}[]; Here's my loop: for (let product of this.products) { category.products.push((product as ProductDTO).serialize()); } However, ...

javascripttypescript

Having trouble deciphering the request header value within the REST web API

Utilizing Ajax, I am storing the token in the request header and sending it to a Rest API. Here is the request sent to the web API: var xhr = new XMLHttpRequest(); $.ajax({ url: 'http://localhost:32253/api/UserDetail/Authenticate', head ...

javascriptc#asp.netajaxrest

Updating a MongoDB subarray with $set now includes adding a new entry rather than just updating existing ones

When trying to update an object in a sub-array, instead of replacing and updating the data, it adds a new entry. Here is the code from controller.js: const updateSubCategory = asyncHandler(async (req, res) => { const { dataArray } = req.body ...

javascriptmongodbecmascript-6

Loading slides in bxSlider using ajax

Is there a method to dynamically insert a slide into bxSlider via ajax without affecting its smooth transition? I am looking to initially display the contents of only one slide upon page load, and then have subsequent slides loaded when the next or previo ...

javascriptjqueryjquery-pluginsbxslider