模态框失效 且popper报错

bootstrap的模态框失效 并且没有data-dismiss这个属性

这是jsp的引入

<script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/2.11.6/cjs/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-icons/1.10.2/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/css/bootstrap.min.css">

这是添加按钮

<div class="form-group col-md-2 col" >
                            <button type="button" class="btn btn-success" data-toggle="modal" onclick="read()" data-bs-target="#addUserModal">
                                    <span style="" class="" aria-hidden="true">
                                        <i class="bi bi-person-fill-add">添加用户信息</i>
                                    </span>
                            </button>
                        </div>

这是模态框

<form method="post" action="UserServlet?type=add" class="form-horizontal" role="form"
id="form_data">
    <div class="modal fade" id="addUserModal" tabindex="-1"
    role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" type="button">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true"></button>
                    <h4 class="modal-title" id="myModalLabel">添加信息</h4>
                </div>
                <div>
                    <form>
                        <div class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="user_id" class="col-sm-3 custom-control-label">用户名</label>
                                <div class="col-sm-9">
                                    <input type="text" required class="form-control" id="username"
                                      name="username" placeholder="请输入用户名">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="user_id" class="col-sm-3 custom-control-label">密码</label>
                                <div class="col-sm-9">
                                    <input type="text" required class="form-control" id="password"
                                        name="password" value="" placeholder="请输入密码">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="user_id" class="col-sm-3 custom-control-label">姓名</label>
                                <div class="col-sm-9">
                                    <input type="text" required class="form-control" id="name"
                                           name="name" value="" placeholder="请输入密码">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="user_id" class="col-sm-3 custom-control-label">ID</label>
                                <div class="col-sm-9">
                                    <input type="text" required class="form-control" id="id"
                                           name="id" value="" placeholder="请输入密码">
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</form>

浏览器控制台会报一个popper的错误
Object.defineProperty(exports, "__esModule", {
value: !0
});
说是exports没有被定义
求解决！

新问题 现在模态框能弹出来黑色影子 但是popper报错又多一项

function getWindow(e) {
    return null == e ? window : "[object Window]" !== e.toString() ? (t = e.ownerDocument) && t.defaultView || window : e;
    var t
}
function isElement(e) {
    return e instanceof getWindow(e).Element || e instanceof Element
}
function isHTMLElement(e) {
    return e instanceof getWindow(e).HTMLElement || e instanceof HTMLElement
}
function isShadowRoot(e) {
    return "undefined" != typeof ShadowRoot && (e instanceof getWindow(e).ShadowRoot || e instanceof ShadowRoot)
}
Object.defineProperty(exports, "__esModule", {
    value: !0
});

原因如下

Uncaught RangeError: Maximum call stack size exceeded
    at HTMLDivElement.toString (<anonymous>)
    at getWindow (popper.min.js:formatted:3)
    at getComputedStyle (popper.min.js:formatted:81)
    at getComputedStyle (popper.min.js:formatted:81)
    at getComputedStyle (popper.min.js:formatted:81)
    at getComputedStyle (popper.min.js:formatted:81)
    at getComputedStyle (popper.min.js:formatted:81)
    at getComputedStyle (popper.min.js:formatted:81)
    at getComputedStyle (popper.min.js:formatted:81)
    at getComputedStyle (popper.min.js:formatted:81)

如果可以的话，可以换一个前端控件，比如layui等。