Bootstrap:未捕获的类型错误:无法读取未定义的属性“fn" [英] Bootstrap: Uncaught TypeError: Cannot read property 'fn' of undefined

查看:26
本文介绍了Bootstrap:未捕获的类型错误:无法读取未定义的属性“fn"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用 Bootstrap 制作一个 Electron 应用程序.我收到此错误消息:

未捕获的类型错误:无法读取未定义的属性fn"在 setTransitionEndSupport (bootstrap.js:122)在 bootstrap.js:199在 bootstrap.js:201在 bootstrap.js:9在 bootstrap.js:10

我在 package.json 中的依赖项是:

依赖项":{"引导程序": "^4.1.2","电子": "^2.0.5","jquery": "^3.3.1","popper.js": "^1.14.3"}

我的 index.html 文件是:

<头><meta charset="UTF-8"><title>发布管理报告</title><身体><div class="容器"><h1>自举测试</h1><p>我们正在使用节点<script>document.write(process.versions.node)</script>,Chrome<script>document.write(process.versions.chrome)</script> 和 Electron<script>document.write(process.versions.electron)</script>.</p>

<script src="node_modules/jquery/dist/jquery.min.js"></script><script src="node_modules/popper.js/dist/umd/popper.min.js"></script><script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

然后由E​​lectron快速启动的main.js加载html文件:

const { app, BrowserWindow } = require('electron')//保持窗口对象的全局引用,如果不这样做,窗口将//当 JavaScript 对象被垃圾回收时自动关闭.让赢函数创建窗口(){//创建浏览器窗口.win = new BrowserWindow({ 宽度: 800, 高度: 600 })//并加载应用程序的 index.html.win.loadFile('index.html')//打开开发者工具.win.webContents.openDevTools()//当窗口关闭时发出.win.on('关闭', () => {//取消引用窗口对象,通常你会存储窗口//在一个数组中,如果你的应用支持多窗口,现在是时候了//当你应该删除相应的元素时.赢 = 空})}//当 Electron 完成时将调用此方法//初始化并准备好创建浏览器窗口.//有的API只有在这个事件发生后才能使用.app.on('ready', createWindow)//当所有窗口都关闭时退出.app.on('window-all-closed', () => {//在 macOS 上,应用程序及其菜单栏很常见//保持活动状态,直到用户使用 Cmd + Q 明确退出如果(进程平台!== '达尔文'){应用程序退出()}})app.on('激活', () => {//在 macOS 上,在应用程序中重新创建一个窗口是很常见的//停靠图标被点击,没有其他窗口打开.如果(赢 === 空){创建窗口()}})

我找到的大多数解决方案都告诉我在 Bootstrap 之前导入 jQuery,但这已经是我正在做的.

感谢您的帮助!

解决方案

我找到了解决问题的方法.

我在 index.html 中添加了一个脚本:

这是script.js的内容:

window.$ = window.jQuery = require('jquery');//不确定你是否需要这个window.Bootstrap = require('bootstrap');

我们可以从 index.html 中删除这些行以避免双重导入:

<script src=node_modules/popper.js/dist/umd/popper.min.js"></script><script src=node_modules/bootstrap/dist/js/bootstrap.js"></script>

我在以下位置找到了这个解决方案:https://github.com/understrap/understrap/issues/第449话在 karo1915 的评论下.

I am trying to make an Electron application with Bootstrap. I get this error message:

Uncaught TypeError: Cannot read property 'fn' of undefined
at setTransitionEndSupport (bootstrap.js:122)
at bootstrap.js:199
at bootstrap.js:201
at bootstrap.js:9
at bootstrap.js:10

My dependencies in the package.json are:

"dependencies": {
  "bootstrap": "^4.1.2",
  "electron": "^2.0.5",
  "jquery": "^3.3.1",
  "popper.js": "^1.14.3"
}

My index.html file is:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Release Management Report</title>

</head>

<body>

  <div class="container">

    <h1>Bootstrap Test</h1>

    <p>
        We are using node
        <script>document.write(process.versions.node)</script>, Chrome
        <script>document.write(process.versions.chrome)</script>, and Electron
        <script>document.write(process.versions.electron)</script>.
    </p>

  </div>

  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

</body>

</html>

Then the html file is loaded by the main.js from Electron quick start:

const { app, BrowserWindow } = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({ width: 800, height: 600 })

  // and load the index.html of the app.
  win.loadFile('index.html')

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

Most of the solutions I have found tell me to import jQuery before Bootstrap, but that is already what I am doing.

Thanks for the help!

解决方案

I found a way to solve the problem.

I added a script in the index.html:

<script src="scripts/script.js"></script>

and this is the content of script.js:

window.$ = window.jQuery = require('jquery'); // not sure if you need this at all
window.Bootstrap = require('bootstrap');

and we can remove these lines from index.html to avoid double import:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

I found this solution at: https://github.com/understrap/understrap/issues/449, under the comment from karo1915.

这篇关于Bootstrap:未捕获的类型错误:无法读取未定义的属性“fn"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆