引导程序 5 引用错误:未定义引导程序

Question

我刚刚完成安装 bootstrap 5 版本^5.0.0-alpha1并在app.js中导入引导程序

import "bootstrap"

其他.js

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

当我运行代码时，它给我错误引用错误：未定义引导程序。

然后我尝试在其他中导入引导程序.js就像这样

import bootstrap from "bootstrap"

但是当我运行npm run dev错误"导出'默认'(作为'引导程序'导入)在'引导程序'中找不到

如果我像import { Modal } from "bootstrap"一样手动导入模式，它会给我错误"类型错误：非法调用">

Answer 1

如果有人尝试使用 webpack，这个解决方案对我有用。

window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js');

Answer 2

如果您使用：

import { Modal } from 'bootstrap'

那么要使用的语法将是：

let myModal = new Modal(document.getElementById('myModal'));
myModal.show();

使用 Vite 和 bootstrap-5.0.0-beta1 为我进行相对简单的设置。

Answer 3

Bootstrap 5.1 + webpack 5：

app.js

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

或者如果您只需要模态：

import * as bootstrap from 'bootstrap';
window.Modal = bootstrap.Modal;

然后你可以在other.js中使用，例如：

var myModal = new Modal(document.getElementById('myModal'));
myModal.show();

Answer 4

对我来说工作

在 app/javascript/packs/application 中.js

window.bootstrap = require('bootstrap');

Answer 5

我在这里尝试了建议的解决方案，但没有一个对我有用。这就是我如何使用react 18.2和bootstrap 5.2让它工作。

1. 使用 npm：
   npm install bootstrap安装引导程序
2. 把它放在你的应用程序中.js导入引导程序CSS：
   import 'bootstrap/dist/css/bootstrap.css'
3. 包括像这样的引导 JS：
   import * as bootstrap from 'bootstrap/dist/js/bootstrap'

Answer 6

我通过添加解决了这个问题

<script type="module">

成功了 你可以参考它

Answer 7

inapp.js后

import 'bootstrap';

插入这两行

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

Answer 8

对于类型错误： 非法调用含义：

var modal = new Modal(document.getElementById('modal'))
// no tag div with id modal
// will produce error **Illegal Invocation**

这对我来说是有用的。bootstrap@5.0.0-beta1

<script>    
import { Modal } from 'bootstrap'
export default {
data: () => ({
modal: ''
}),
mounted() {
this.modal = new Modal(document.getElementById('exampleModal'))
},
methods: {
openModal() {
this.modal.show()
},
closeModal() {
this.modal.hide()
}
}
}
</script>
<template>
<div id="exampleModal">...</div>
</template>

Answer 9

如果不通过 HTML 中的<script>标记或 CDN 导入引导程序，则bootstrap命名空间不在窗口对象上，因此不会定义它。如果您使用的是诸如Webpack之类的捆绑器，则必须加载它并为其提供全名。

import { Modal } from 'bootstrap/dist/js/bootstrap.bundle.js';

应该完美地工作。这样，您还将拥有 Bootstrap 的 JavaScript 使用的 popper.js依赖项。

确保你确实在使用支持ESnext的东西。

Answer 10

以下是使用 Webpack 将 Bootstrap 5 Javascript 与您需要的插件捆绑在一起的方法：

src/bootstrap-bundle-src.js

import { Alert, Button, Collapse, Tooltip, Popover } from 'bootstrap'
window.bootstrap = {
Alert, Button, Collapse, Tooltip, Popover
}

包.json

{
"name": "project-name",
"version": "1.0.0",
"description": "Bootstrap 5 custom Javascript bundler",
"scripts": {
"build": "webpack",
},
"author": "You",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.19.6",
"@babel/preset-env": "^7.19.4",
"exports-loader": "^4.0.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"babel-loader": "^8.2.5",
"bootstrap": "^5.2.1",
}
}

webpack.config.js

const path = require('path');
module.exports = {
entry: './src/bootstrap-bundle-src.js',
output: {
filename: 'bootstrap-bundle.min.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production',
module: {
rules: [
// Use babel for JS files
{
test: /.js$/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env"
]
}
}
}
],
}
};

然后运行npm run build以生成dist/bootstrap-bundle.min.js

Answer 11

在带有 Webpack 的 Laravel 中，这对我有用：

import {Collapse} from "bootstrap" 

注：括号

let boostrapCollapse = new Collapse(searchPanel, {
toggle: false
});