- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将我的 javascript 文件移动到 Webpack。我对 Webpack 不太熟悉,所以我不确定我是否正确编码了其中的任何内容。我正在尝试加载 jquery-ui、popper 和 bootstrap 4。但是,在需要 Popper
时出现错误。请注意,我正在为 Ruby on Rails 使用 Wepacker gem。
我已在environment.js 文件中包含以下代码,以便在每个文件中自动包含 jQuery。
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}))
module.exports = environment
这部分有效。因此,从那里我运行了yarn add jquery-ui
。
然后在我的/pack/application.js 文件中包含 require('jquery-ui')
。
从我的 js 文件中,以下代码将打印到我的控制台:
$(document).ready(function(){
if (jQuery.ui) {
console.log("loaded");
}
});
此后,我尝试使用 yarn add popper
安装并要求 popper
。
然后从我的 document.ready
函数内部调用 popper,我收到错误:
$(document).ready(function(){
console.log(window.Popper)
});
错误:
Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/ubuntu/environment/node_modules/path-platform/path.js: 'return' outside of function (32:2)
30 | if (_path.posix) {
31 | module.exports = _path;
32 | return;
| ^
33 | }
34 |
35 | // resolves . and .. elements in a path array with directory names there
at Parser.raise (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:6420)
at Parser.parseReturnStatement
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10370)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10057)
at Parser.parseStatement (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10009)
at Parser.parseBlockOrModuleBlockBody
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10572)
at Parser.parseBlock (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10556)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10085)
at Parser.parseStatement (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10009)
at Parser.parseIfStatement
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10363)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10054)
at Parser.parseStatement (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10009)
at Parser.parseBlockOrModuleBlockBody
(home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:10572)
at Parser.parseTopLevel (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:9940)
at Parser.parse (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:11447)
at parse (home/ubuntu/environment/node_modules/@babel/parser/lib/index.js:11483)
at parser (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/normalize-file.js:168)
at normalizeFile (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/normalize-file.js:102)
at runSync (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/index.js:44)
at runAsync (home/ubuntu/environment/node_modules/@babel/core/lib/transformation/index.js:35)
at process.nextTick (home/ubuntu/environment/node_modules/@babel/core/lib/transform.js:34)
at process._tickCallback (internal/process/next_tick.js:61)
at Object../node_modules/path-platform/path.js (index.js:82)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:1)
at Object../node_modules/parents/index.js (index.js:39)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:19)
at Object../node_modules/module-deps/index.js (index.js:623)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:3)
at Object../node_modules/browserify/index.js (index.js:846)
这是我的 pack/application.js 文件
require("@rails/ujs").start()
require("@rails/activestorage").start()
require('jquery-ui')
require('popper')
最佳答案
我刚刚做了同样的事情,然后意识到问题是什么。 popper是 Node.js 中的某种高级浏览器测试库。 Bootstrap 取决于 popper.js ,这是浏览器的工具提示弹出库。
因此,要解决此问题,您需要:
yarn remove popper
yarn add popper.js
关于javascript - Webpack 不能要求 Popper,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58453631/
我在自定义下拉菜单中的项目上使用 popper.js(它不是 )。该站点使用 Bootstrap 4。 我的poppers看起来像这样,但我希望它溢出滚动容器之外: 我希望 poppers 出现在
如何将 popper 与刚刚发布的 Bootstrap 5 alpha 捆绑在一起? 最佳答案 Bootstrap 5,就像 v4 一样默认带有 JS 包 - Bootstrap JS + poppe
我正在学习使用此命令安装 popper 的教程:npm install popper --save .但是当我尝试它时收到此错误消息:fatal error - cygheap base mismat
我想给一个弹出框(工具提示)一个填充窗口。所以它对窗框有一个偏移量,而不是 stick at the edges 我试图通过添加 padding/ margin/ transparent border
我正在开发一个日历应用程序。 问题:单击 popper 的 popper 会关闭两个 popper,因为它会触发关闭它的第一个 popper 的 click outside 事件。 我有一个组件 使用
我正在使用 Material UI (v 4.9.5) Popper对于上面的“弹出”菜单。它是 anchorElement是选中的ListItem在左边。 我想要 Popper与主菜单顶部齐平。但是
Angular 和 Bootstrap 的新手,我正在尝试创建 helloworld 应用程序。我已经添加了所需的库,但我一直卡在这个错误中 Uncaught Error: Bootstrap dro
所以 Bootstrap 4 Beta 已经发布了……是的!但是,Tether 已被 Popper.js 替换为工具提示(和其他功能)。我看到控制台中抛出的错误足够快,可以告诉我对 Popper.js
当我为现有 React 项目输入命令 npm update 时,会显示以下内容: npm WARN deprecated popper.js@1.16.1: You can find the new
我尝试编辑 Tippy.js 的 CSS STLye。所以我 npm install tippy 并像这样将它导入我的 html 但是,它有一些错误。 Uncaught TypeError: Pop
我在 React 中构建了一个自定义 TreeView ,每个项目都包含一个使用 Popper 定位的下拉列表。由于子元素在渲染时不可见,因此 Popper 没有正确定位下拉列表,例如: 当树在 mo
由于依赖 jquery 3x,我在使用某些 ng-bootstrap 下拉组件时遇到问题,而 jquery 3x 又无法找到 popper.js 在我的控制台中查看此内容 Uncaught Error
我正在尝试将我的 javascript 文件移动到 Webpack。我对 Webpack 不太熟悉,所以我不确定我是否正确编码了其中的任何内容。我正在尝试加载 jquery-ui、popper 和 b
运行命令: npm install popper.js --save 将返回警告消息: npm WARN 已弃用 popper.js@1.16.1:您可以在 @popperjs/core 找到新的 P
我正在使用 Bootstrap,我希望使用下拉菜单。当我点击它时它不起作用,控制台中出现以下消息: Uncaught TypeError: Bootstrap dropdown require Pop
这似乎是一个蹩脚的问题,但我想不通。如何导入 Bootstrap 4 beta 自带的 popper.js? 我使用 Bower,并且安装了 Bootstrap 4 beta。现在在 bower_co
我刚刚升级到 Bootstrap 4 并实现了 Popper.js是一种依赖。我喜欢在本地托管库,因为我有时需要离线工作,但当我尝试离线使用它时,我收到错误消息 unexpected token ex
我目前在阻止我的工具提示离开 View 时遇到问题。 这是我创建工具提示实例的代码: // The '+'-Button as seen on the screenshots below const
我正在尝试制作下拉菜单,但出现此错误: "Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
我正在使用 Popper.js当单击具有类 .js-share-cf-btn 的元素时显示具有类 .js-share-cf-popover 的弹出元素。 但我希望仅当我在其外部单击时弹出窗 Eloqu
我是一名优秀的程序员,十分优秀!