Issues with importing Bootstrap in JavaScript

Utilizing Bootstrap in both HTML and JavaScript/TypeScript has been my recent endeavor. I have successfully imported the minified versions of Bootstrap JS and CSS in my HTML file and incorporated this line of code in my TypeScript: 

import * as bootstrap from "bootstrap";

However, when attempting to execute the following snippet:

 var myModal = new bootstrap.Modal(document.getElementById('popup'), {
      keyboard: false
 })
 myModal.hide()

The Chrome console threw an error message:

Uncaught TypeError: Failed to resolve module specifier "bootstrap". Relative references must start with either "/", "./", or "../".

javascripttwitter-bootstrapimportbootstrap-5

Answer №1

It seems unnecessary to include any imports in this scenario; you can simply utilize it without importing anything. 

let myModal = new bootstrap.Modal(document.getElementById('popup'), {
      keyboard: false
 });
 
 console.log(myModal);
<div id="popup">popup</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d2d58435c435e">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

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

Mapping out your data effectively requires following the correct steps to ensure accuracy and clarity

My goal is to display a map using Mapbox only once the data is ready. The Vuex store code I am working with is as follows: /store/index.js import Vue from "vue"; import Vuex from "vuex"; import _ from "lodash"; import { bac ...

javascriptvue.jsvuexmapbox

When hovering over slick text, it becomes hidden because of non-responsive CSS. Are there any solutions to make it responsive?

I can't seem to get the on-hover dates to appear, even though they are rendered when inspecting the page. I suspect it could be related to a responsive CSS issue or class breaking. How can I resolve this? https://i.stack.imgur.com/jyEJb.png https:// ...

javascriptphphtmlcss

Symfony2: Using Ajax to send data to a controller

I have implemented a search input on my website that allows users to search for content within my database. I want this search input to function similarly to the search bar on Facebook, using Ajax for instant searching. Despite trying various code snippets ...

javascriptajaxsymfony

Bootstrap Datatable stops working when content is loaded through Ajax requests

While I understand that this question may seem like a duplicate, I have not been able to find a similar script to mine. As a newcomer to JavaScript and JQuery, transitioning from PHP, I'm struggling to navigate this terrain. Previously, my datatable ...

javascriptjqueryajaxdatatablesbootstrap-4

Uh-oh, Ajax encountered a 500 Internal Server Error!

Utilizing ajax to fetch events from my database has hit a snag. Instead of displaying the results, there is nothing visible on the screen, and the console is showing this error message: POST http://www.example.com/system/live_filter.php 500 (Internal Se ...

javascriptphpjqueryajax

How to customize the font size in three.js CSS3DRenderer

I am trying to use threejs's CSS3DRenderer to display text in my 3D view. However, I am facing issues with controlling the font size. Despite setting font-size: 1px in CSS, the text remains large. I also attempted to adjust the scale of the css3dobjec ...

javascriptcssthree.js

Apply a different class to a group of elements when hovering over them, excluding the element being hovered on

I need to blur multiple elements on my website when I hover over them, leaving only the hovered element in focus. Is there a more efficient way to achieve this? Currently, I have the following code: $(function() { $('#a').hover(function() { ...

javascriptjqueryhtmlhoveraddclass

The correct way to properly define an eventEmitter in JavaScript

I am looking to create a helper object with a function that will trigger on each "orientationchange" event of the window. Below is my code, but it is not working correctly. Can you help me define the onRotate function properly so that I can use it globall ...

javascripteventemitter

VueX threw an error stating that it cannot read property 'getters' because it is undefined in Nuxt.js

Just starting out with Vuejs and Nuxt.js. I recently set up a Nuxt project but encountered an error when trying to run it: https://i.sstatic.net/ROtOs.png Any assistance would be greatly appreciated. Thank you. ...

javascriptvue.jsvuejs2vuexnuxt.js

Unable to load the requested resource: net::ERR_FAILED

I am facing an issue while trying to write React code. When using Chrome, I encountered the following warning: Access to XMLHttpRequest at 'file:///D:/programe/code/Vscode/ReactDemo/HelloWorld/test.js' from origin 'null' has been block ...

javascripthtmlreactjsgoogle-chromedebugging

Setting a timeout for loading an external JavaScript file that is currently inaccessible

Using JavaScript, I am integrating content from a PHP file on a different server. Unfortunately, this external service can be unreliable at times, causing delays in loading or not loading at all. I am looking for a way in JavaScript to attempt retrieving ...

javascriptajaxtimeout

Changing a base64 string to an image within an angular 4 environment

My current task involves cropping an image using ng2-image cropper, but the result is in base64 format. I need to convert it to an image source so that I can send it to a server. Despite searching, I haven't been able to find anything compatible with ...

javascriptangular

CORS error: The 'Access-Control-Allow-Origin' header is missing

I have a website that is being accessed through multiple domain names. Let's say the main hosted website is example.com and the forwarded domain names are example-x.com, example-y.com, example-z.com When visitors access the forwarded domains, there ...

javascriptajax.htaccesscors

Is there a way to restrict input to only letters and one underscore in a consecutive sequence?

Having trouble creating an input that requires the first character to be a letter, and subsequent characters to be either letters or a single underscore at a time? I attempted to implement the following JavaScript code for an input field: var nick = docum ...

javascripthtmlregexinputpreventdefault

EJS include function not working properly

In most cases, my EJS pages include the code below: <%- include('elements/fbviewpagepixel.ejs') %> Everything runs smoothly except for one particular page where I encountered an error message stating include is not a function. I managed t ...

javascriptnode.jsexpressejs

What is the process for decoding HTML content that is wrapped within JSON data?

I have a web application built using asp.net that utilizes ajax calls. Below is the code snippet for my web method which successfully responds to the ajax call. ADController adc = new ADController(); DataTable dt = adc.GetGeneral(Convert.ToInt32(A ...

javascriptc#htmljsonajax

"Endless loop error in Three.js causing a system crash

I'm currently in the process of developing a library that consists of 'letter' functions responsible for generating letters in vertex coordinates. The main objective here is to allow users to create words or sentences using an interactive Po ...

javascriptthree.js

When the same component is conditionally rendered, it does not activate the mounted() hook

I am new to Vue and eager to learn. I am attempting to conditionally render a component like so: <div> <Map v-if="bool" mapSrc="src1.jpg" :idList="idList1" :data="dataVariable1"></Map> <Map v-else mapSrc="src2.jpg" :idList="idList ...

javascriptvue.jsconditional-statementsrendering

The .env file is functioning properly for the current keys, but any new ones I include remain undefined

Recently, I took over a Vue application that utilizes axios. Within the dataService.js file, it retrieves URLs from a project's .env file using process.env.FOO_BAR for GET requests. The pre-existing key-value pairs such as VUE_APP_DATA_URL function p ...

javascriptvue.jsenvironment-variablesvue-clidotenv

Attempting to generate a jwt results in an undefined value

Currently in the process of mastering Node.js and I am in the midst of transitioning my existing API from Python to Node. My main challenge lies in the creation of a jwt token for authentication purposes with a third-party API. However, it seems I'm e ...

javascriptnode.jsexpressjwt