Estoy tratando de configurar mi primera aplicación Rails 7 e instalé Bootstrap 5 correctamente (puedes ver por el CSS) y me deshice de todos los mensajes de error, pero las funciones de JavaScript (es decir, menús desplegables, offcanvas, etc.) son no funciona
Lo he probado con este código:
<script> $( document ).ready(function() { console.log( "document ready!" ); $( "#TEST" ).click(function() { console.log( "clicked!" ); }); }); </script>Y ambas declaraciones de console.log producen el resultado correcto, lo que me lleva a creer que js y jquery funcionan correctamente y es algo con arranque.
Aquí está mi archivo de gemas:
source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '3.1.0' # RAILS GENERATED STUFF gem 'rails', '~> 7.0.1' gem 'pg', '~> 1.1' gem 'puma', '~> 5.0' gem 'sass-rails', '>= 6' # gem 'webpacker', '~> 5.0' gem 'jsbundling-rails' gem 'jbuilder', '~> 2.7' gem 'bootsnap', '>= 1.4.4', require: false gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] # OTHER NECESSARY STUFF gem 'jquery-rails' gem 'jquery-ui-rails' gem 'sprockets-rails' gem 'bcrypt', '~> 3.1.7' gem 'gon' # ESSENTIALS gem 'devise' gem 'simple_form' gem 'font_awesome5_rails' gem 'friendly_id', '~> 5.2.0' gem 'tinymce-rails' gem 'invisible_captcha' gem 'figaro' gem 'high_voltage', '~> 3.1' gem 'bootstrap', '~> 5.1', '>= 5.1.3' # FOR IMAGES gem 'mini_magick' gem 'aws-sdk' , '~> 3' gem 'aws-sdk-s3', require: false group :development, :test do gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] gem 'pry-rails' gem 'better_errors' end group :development do gem 'web-console', '>= 4.1.0' gem 'rack-mini-profiler', '~> 2.0' gem 'listen', '~> 3.3' gem 'spring' end group :test do gem 'capybara', '>= 3.26' gem 'selenium-webdriver' gem 'webdrivers' end Aquí está mi application.js , que vive en 'javascript/controllers/application.js but somehow also in assets/builds/application.js . I'm not using webpack, rather rollup installed with $ ./bin/rails javascript:install:rollup`:
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails import "controllers" import 'offcanvas'; //= require jquery3 //= require jquery_ujs //= require jquery-ui //= require popper //= require bootstrap //= require activestorage //= require font_awesome5 //= require tinymce window.jQuery = $; window.$ = $;¿Alguien puede ver dónde me estoy equivocando?
Yo tuve el mismo problema.
Hice que todo funcionara agregando el script de paquete de Bootstrap entre las etiquetas del cuerpo del archivo application.html.erb:
<body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <%= yield %> </body>Tuve algunos problemas importantes con esto. Para solucionarlo, vaya a app/javascript/application.js y cambie esto
import "@hotwired/turbo-rails"a esto
import { Turbo } from "@hotwired/turbo-rails" Turbo.session.drive = false Además, utilice siempre bin/dev para iniciar el servidor Rails en desarrollo, en lugar del comando del rails server .