语义 ui 下拉菜单功能在 Rails 6 中不起作用 [英] semantic-ui dropdown menu functionality not working in rails 6

问题描述

我在 gemfile 中添加了 semantic-ui gem 一切正常，但下拉菜单不起作用.我在任何地方都没有找到任何解决方案，
这是在 rails6 中使用的 gem 中的问题吗?
这是 application.js 文件中的 javascript 代码.

I added semantic-ui gem in gemfile everything is working fine but dropdown menu is not working. I did not find any solution anywhere,
is this an issue in gem to use in rails6?
here is javascript code in application.js file.

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 开发工具的控制台中收到此错误.

I got this error in console in chrome development tool.

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

如果您想了解更多有关此项目中使用的代码的信息，请发表评论.

if you want to know more about code used in this project please comment.

推荐答案

按照以下步骤让 Rails 6 使用语义 ui 下拉菜单

Follow these steps for Rails 6 to use semantic ui dropdown menu

用纱线添加包:

yarn add jquery popper.js semantic-ui-sass

在 config/webpack/environment.js 中添加以下内容:

In config/webpack/environment.js add the following:

const webpack = require("webpack")
 
environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

在 app/javascript/packs/application.js 中添加以下内容:

In app/javascript/packs/application.js add the following:

require("semantic-ui-sass")

在 app/javascript/packs/application.js 中

In app/javascript/packs/application.js

$(document).on("turbolinks:load", () => $(".ui.dropdown").dropdown());

这篇关于语义 ui 下拉菜单功能在 Rails 6 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！