Ruby on Rails 7 bootstrap 5 выпадающая панель навигации не работает

Я пытаюсь запустить пример приложения Rails с помощью начальной загрузки 5. Я создал раскрывающееся меню, но панель навигации не раскрывается. Я перепробовал все уроки, и ничего не работает. Вот моя конфигурация:

Rails 7.1.3.2

yarn -v
1.22.19

node --version
v20.12.1

Джемфайл

gem "rails", "~> 7.1.3"

gem "sprockets-rails"

gem "pg", "~> 1.1"

gem "puma", ">= 5.0"

gem "jsbundling-rails"

gem "turbo-rails"

gem "stimulus-rails"

gem "cssbundling-rails"

gem "jbuilder"

gem "jquery-ui-rails"
gem "jquery-rails"
gem "tzinfo-data", platforms: %i[ windows jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri windows ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"
group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
end

Файл app/javascript/application.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

Файл app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Knfapp</title>
    <meta name = "viewport" content = "width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module", defer: true %>
  </head>

  <body>
    <nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <div class = "container-fluid">
    <a class = "navbar-brand" href = "#">Navbar</a>
    <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarNavDropdown" aria-controls = "navbarNavDropdown" aria-expanded = "false" aria-label = "Toggle navigation">
      <span class = "navbar-toggler-icon"></span>
    </button>
    <div class = "collapse navbar-collapse" id = "navbarNavDropdown">
      <ul class = "navbar-nav">
        <li class = "nav-item">
          <a class = "nav-link active" aria-current = "page" href = "#">Home</a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" href = "#">Features</a>
        </li>
        <li class = "nav-item">
          <a class = "nav-link" href = "#">Pricing</a>
        </li>
        <li class = "nav-item dropdown">
          <a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdownMenuLink" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">
            Dropdown link
          </a>
          <ul class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink">
            <li><a class = "dropdown-item" href = "#">Action</a></li>
            <li><a class = "dropdown-item" href = "#">Another action</a></li>
            <li><a class = "dropdown-item" href = "#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
    <%= yield %>
    <footer><p>little</p></footer>
  </body>
</html>

Проект запускается командой:

rails new abcapp -d postgresql -j esbuild --css bootstrap

Сижу на нем несколько часов, но ничего не работает. Буду благодарен за любое предложение.

ruby-on-rails bootstrap-5 navbar

06.04.2024 00:02

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

133

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, мне нужно было просто бежать

yarn build

rails assets:precompile

чтобы это сработало.

Нет, вам не нужно делать это в разработке. Когда вы запускаете приложение Rails 7 и используете esbuild, вы используете bin/dev. Это должно скомпилировать ваш javascript и css и запустить ваш сервер Rails.

— 06.04.2024 04:31

06.04.2024 01:43