Incorporating Bootstrap Modal into a TypeScript-based minimalist web application

I want to incorporate the Bootstrap Modal component into my TypeScript application. Therefore, I added the necessary types:

npm i @types/bootstrap

After that, in my TypeScript code:

import { Modal } from "bootstrap";
const myModal = new Modal('#myModal');

But when I try to compile the code, I encounter the following error:

TS2792: Cannot find module '@popperjs/core'. Did you mean to set the
'moduleResolution' option to 'nodenext', or to add aliases to the
'paths' option?

1 import * as Popper from '@popperjs/core';
                          ~~~~~~~~~~~~~~~~

node_modules/@types/bootstrap/js/dist/tooltip.d.ts:1:25 - error
TS2792: Cannot find module '@popperjs/core'. Did you mean to set the
'moduleResolution' option to 'nodenext', or to add aliases to the
'paths' option?

1 import * as Popper from '@popperjs/core';
                          ~~~~~~~~~~~~~~~~


Found 2 errors in 2 files.

Errors  Files
     1  node_modules/@types/bootstrap/js/dist/dropdown.d.ts:1
     1  node_modules/@types/bootstrap/js/dist/tooltip.d.ts:1

Following the error message's advice and adding 

"moduleResolution": "NodeNext"
allows for successful compilation. However, a runtime error appears in the console:

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

So, how can I use a Bootstrap modal with TypeScript?

typescripttwitter-bootstrapbootstrap-5

Answer №1

It is crucial to have the Bootstrap import present, but its direct usage is discouraged. Instead, opt for Modal1, which comes from the dist directory.

There may be a situation where you have to import the modal from the dist folder while also importing Bootstrap's modal conventionally. Directly importing the standard Bootstrap modal can disrupt various functionalities on the JavaScript side. However, omitting the import altogether will render everything non-functional.

import Modal1 from 'bootstrap/js/dist/modal';
import { Modal } from 'bootstrap';

showModal(bool: boolean): void {
    if (bool) {
      const myModal = new Modal1(this.modalElement?.nativeElement);
      myModal?.show();
    } else {
      const modal = Modal1.getInstance(this.modalElement?.nativeElement);
      modal?.hide();
    }
}

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

Older versions of javascript offered the assurance of a promise

Working with TypeScript and the latest ECMAScript 6 feature Promise at the moment. I'm wondering if it's possible to use Promise even if my TypeScript code is compiled into an ECMAScript 3 js-file, considering that Promise wasn't available i ...

typescriptecmascript-6promise

The parameter type 'router' cannot be replaced with the type 'typeof ...'. The 'param' property is not included in the type 'typeof'

I'm currently working on a node application using TypeScript and have set up routing in a separate file named 'route.ts' import home = require('../controller/homeController'); import express = require('express'); let ro ...

node.jsexpresstypescript

Sort through a list of objects by certain properties

I'm currently dealing with two arrays: one contains displayed columns and the other contains objects retrieved from a database, with more attributes than the displayed columns. displayedColumns = ['CompanyName','Ticker', 'Id& ...

javascriptarraysangulartypescript

Developing a Gulp buildchain: Transforming Typescript with Babelify, Browserify, and Uglify

I've configured a buildchain in Gulp, but when I execute the gulp command, it only utilizes one of the two entry points I specify. My goal is to merge the methods outlined in these two resources: and here: https://gist.github.com/frasaleksander/4f7b ...

node.jstypescriptgulpbabeljsbrowserify

The attribute 'y' is not found within the data type 'number'

Currently working on a project using Vue.js, Quasar, and TypeScript. However, encountering errors that state the following: Property 'y' does not exist on type 'number | { x: number[]; y: number[]; }'. Property 'y' does not ...

typescriptvue.jsquasar

Include quotation marks around a string in C# to convert it into JSON format

I am utilizing a service that operates with JSON format. However, the JSON data I am receiving does not include double quotes around keys and values. Here is an example of the data I have: [{name:{buyerfirstname:Randy, buyermiddlename:null, buyerlastnam ...

javascriptc#typescript.net-corejson.net

Use PipeTransform to apply multiple filters simultaneously

Is it possible to apply multiple filters with PipeTransform? I attempted the following: posts; postss; transform(items: any[]): any[] { if (items && items.length) this.posts = items.filter(it => it.library = it.library ...

javascriptangulartypescriptionic-frameworkionic2

The request/response is missing property "x" in type "y" but it is required in type "z" during fetch operation

I have configured an interface specifically for utilization with an asynchronous function: interface PostScriptTagResponse { script_tag : { readonly id : number , src : string , event : string , readonly created_at : string , readonl ...

typescriptes6-promise

Bootstrap-tour is incompatible with a row within a table structure

Is there a way to highlight a table row effectively? I've been struggling with it and tried using the fix mentioned in this bootstrap-tour issue here Check out this demonstration on jsFiddle: jsFiddle JAVASCRIPT $("#dialog").dialog(); var t = new ...

javascriptcsstwitter-bootstrapz-indexbootstrap-tour

"Utilize React input event handler for enforcing minimum input

Is there a way to validate the minimum length of an input without submitting the form using the onKeyDown event? I've attempted to do so, but it seems to ignore the minLength property. I have a simple input field that doesn't need a form. Here&ap ...

reactjstypescript

Trouble with modifying a cell in a TypeScript office script

Hello everyone. I am in need of a code that can track which cells are active or selected, and then block them once a user is no longer interacting with them. I understand that there may be some issues, especially if the user selects a cell but does not ma ...

typescriptoffice-jsoffice-scripts

Error message displayed indicating script not found after executing yarn tsc within a Docker container

Using docker, I successfully built my project by running yarn tsc. However, when I executed docker run -p88:5011 accounts2 I encountered the following error: PM2 error: Error: Script not found: /home/accounts/dist/server/index.js. This error occurs despit ...

typescriptdockeryarnpkg

Repeatedly view the identical file on HTML

I'm currently working with the following HTML code: <input type="file" style="display: none" #file(change)="processImage($event)" /> <button type="button" class="btn" (click)="file.click()" Browse </button> When I select image1 fr ...

htmlangulartypescript

The Bootstrap nav-link class functions perfectly in Firefox, smoothly guiding users to the appropriate section. However, it seems to be experiencing some issues

I am currently working on customizing a one-page web template and I don't have much experience with Bootstrap. The template can be found at . My issue is that the menu items are not functional in Chrome. When I click on any menu item, nothing happens ...

javascripthtmlcsstwitter-bootstrap

The typings for object properties in Typescript

I recently encountered a function call in my code: var myVar = myFunction({ property: 'prop', functionProperty() { console.log(this.property); }, functionProperty2() { this.functionProperty(); } }); I' ...

typescripttypescript-typings

Apply CSS styling to the shadow root

In my preact project, I am creating a Shadow DOM and injecting a style element into the Shadow root using the following code: import style from "./layout/main.css"; loader(window, defaultConfig, window.document.currentScript, (el, config) => ...

javascriptreactjstypescriptshadow-dom

Customize the navbar on the screen to prevent overflow and eliminate the need for a horizontal

I have a customized navbar(bootstrap) on my webpage. <nav class='navbar fixed-top navCustom '> <div class='navComp'> <input class='dateStyle' id='dateChart' type='date' value=& ...

htmlcsstwitter-bootstrap

Display the concealed mat-option once all other options have been filtered out

My current task involves dynamically creating multiple <mat-select> elements based on the number of "tag types" retrieved from the backend. These <mat-select> elements are then filled with tag data. Users have the ability to add new "tag types, ...

htmlangulartypescriptangular-materialngrx

"The process of logging in to Facebook on Ionic app speeds up by bypassing

I'm facing a minor issue with Facebook login in Ionic. I've tried using Async - Await and various other methods to make it wait for the response, but nothing seems to work. The login function is working fine, but it's not pausing for me to p ...

facebookangulartypescriptionic2ionic3

Confirm the object received from the API and assign default values

Seeking to extract data from an API and verify if all fields are strings, but if they are missing I aim to assign default values. My intention was to utilize the yup library to validate the object accordingly, ensuring that the returned function is prope ...

javascripttypescriptvalidationtypesyup