jquery - 语义 UI 下拉菜单功能在 Rails 6 中不起作用
问题描述
我在 gemfile 中添加了语义 ui gem,一切正常,但下拉菜单不起作用。我在任何地方都没有找到任何解决方案,
这是在 rails6 中使用的 gem 的问题吗?
这是 application.js 文件中的 javascript 代码。
require("jquery")
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("semantic-ui")
require("bootstrap/dist/js/bootstrap")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
$(document).on('turbolinks:load', function(){
$('.ui .dropdown').dropdown();
})
我在 chrome 开发工具的控制台中收到此错误。
Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Package exports for '/Users/letsventure/Project/message_me/node_modules/@babel/helper-compilation-targets' do not define a '.' subpath
at applyExports (internal/modules/cjs/loader.js:485)
at resolveExports (internal/modules/cjs/loader.js:508)
at Function.Module._findPath (internal/modules/cjs/loader.js:577)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879)
at Function.Module._load (internal/modules/cjs/loader.js:785)
at Module.require (internal/modules/cjs/loader.js:956)
at require (Users/letsventure/Project/message_me/node_modules/v8-compile-cache/v8-compile-cache.js:161)
at Object.<anonymous> (Users/letsventure/Project/message_me/node_modules/@babel/preset-env/lib/debug.js:8)
at Module._compile (Users/letsventure/Project/message_me/node_modules/v8-compile-cache/v8-compile-cache.js:192)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103)
at Module.load (internal/modules/cjs/loader.js:914)
at Function.Module._load (internal/modules/cjs/loader.js:822)
at Module.require (internal/modules/cjs/loader.js:956)
at require (Users/letsventure/Project/message_me/node_modules/v8-compile-cache/v8-compile-cache.js:161)
at Object.<anonymous> (Users/letsventure/Project/message_me/node_modules/@babel/preset-env/lib/index.js:11)
at Module._compile (Users/letsventure/Project/message_me/node_modules/v8-compile-cache/v8-compile-cache.js:192)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103)
at Module.load (internal/modules/cjs/loader.js:914)
at Function.Module._load (internal/modules/cjs/loader.js:822)
at Module.require (internal/modules/cjs/loader.js:956)
at require (Users/letsventure/Project/message_me/node_modules/v8-compile-cache/v8-compile-cache.js:161)
at requireModule (Users/letsventure/Project/message_me/node_modules/@babel/core/lib/config/files/plugins.js:165)
at loadPreset (Users/letsventure/Project/message_me/node_modules/@babel/core/lib/config/files/plugins.js:83)
at createDescriptor (Users/letsventure/Project/message_me/node_modules/@babel/core/lib/config/config-descriptors.js:154)
at Users/letsventure/Project/message_me/node_modules/@babel/core/lib/config/config-descriptors.js:109
at Array.map (<anonymous>)
at createDescriptors (Users/letsventure/Project/message_me/node_modules/@babel/core/lib/config/config-descriptors.js:109)
at createPresetDescriptors (Users/letsventure/Project/message_me/node_modules/@babel/core/lib/config/config-descriptors.js:101)
at presets (Users/letsventure/Project/message_me/node_modules/@babel/core/lib/config/config-descriptors.js:47)
at mergeChainOpts (Users/letsventure/Project/message_me/node_modules/@babel/core/lib/config/config-chain.js:320)
at Object../app/javascript/packs/application.js (bootstrap:83)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
如果您想了解有关此项目中使用的代码的更多信息,请发表评论。
解决方案
按照这些步骤让 Rails 6 使用语义 ui 下拉菜单
用纱线添加包:
yarn add jquery popper.js semantic-ui-sass
在 config/webpack/environment.js 添加以下内容:
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
在 app/javascript/packs/application.js 添加以下内容:
require("semantic-ui-sass")
在 app/javascript/packs/application.js
$(document).on("turbolinks:load", () => $(".ui.dropdown").dropdown());
推荐阅读
- .net-core - 当开发工具关闭时,Angular 6 应用程序无法在 IE11 中运行
- c# - 通过另一种形式的datagridview从表单1中的文本框添加到数据库
- c# - Xamarin.Forms 错误(ADB0000:值不能为空)
- jquery - 如何使用 Vimeo 的“player.js”在一页上处理多个播放器
- android - 如何使android布局背景透明?
- reactjs - 我可以在 Jest 中获取 console.error() 的堆栈跟踪吗?
- python - 个人代码项目仅在某些时候有效
- django-models - 如何使用 Django 在查询中加入 3 个表,结合选择相关和 prefetch_related
- c# - C# FrameworkCore 和 MySQL:无法删除或更新父行:外键约束失败
- javascript - ER_NO_DB_ERROR:虽然数据库存在但没有数据库