Rails 7 Semantic-UI jQuery «Uncaught ReferenceError» с использованием Importmaps

Question

Rails 7 Semantic-UI jQuery «Uncaught ReferenceError» с использованием Importmaps

Резюме проблемы

У меня есть новое приложение rails 7, которое использует importmap-rails gem для управления внешними библиотеками javascript.

Я пытаюсь использовать библиотеку Semantic-UI, но зависимость для jQuery не распознается javascript Semantic-UI.

Мне не удалось закрепить библиотеку Semantic-UI через importmap, поэтому я добавил эту библиотеку в файл вручную. Вот ссылка на cdn для semantic.min.js, который я использую .

В консоли Chrome Web Tools появляется следующее сообщение об ошибке, и складные аккордеоны не работают, которые у меня есть на странице для проверки javascript.

      Uncaught ReferenceError: jQuery is not defined
    at semantic.min.js:11:6043
(anonymous) @ semantic.min.js:11

Строка, на которую ссылается semantic.min.js выглядит так

      (jQuery,window,document)

Попытки исправления

Я подумал, что потенциально проблема может заключаться в порядке, в котором происходил импорт Semantic-UI и jQuery (согласно ряду других вопросов о переполнении стека и проблемах Github ).

Однако у меня импорт jQuery происходит до импорта Semantic-UI.

Если я закомментирую импорт Semantic-UI, я смогу без проблем использовать jQuery.

я переключил preload переменная на importmap.rb файл, чтобы увидеть, не слишком ли быстро загружается Semantic-UI.

Я попытался переименовать импорт jQuery в $ и jQuery, но ни один из них не будет распознан.

Моя интуиция говорит, что Semantic-UI загружается до того, как jQuery устанавливается в качестве глобальной переменной, но я не уверен, как это работает с новыми функциями importmap и конвейером активов.

Конфигурация приложения

Импорткарта.rb

      # Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js", preload: true
pin "semantic-ui", to: "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"

pin_all_from "app/javascript/controllers", under: "controllers"

Application.js

      // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "jquery" 
import "semantic-ui"

index.html.erb складные аккордеоны

      <div class="ui styled accordion">
  <div class="title">
    <i class="dropdown icon"></i>
    What is a dog?
  </div>
  <div class="content">
    <p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
  </div>
  <div class="title active">
    <i class="dropdown icon"></i>
    What kinds of dogs are there?
  </div>
  <div class="content active">
    <p class="transition visible">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
  </div>
  <div class="title">
    <i class="dropdown icon"></i>
    How do you acquire a dog?
  </div>
  <div class="content">
    <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
    <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
  </div>
</div>

Файл драгоценного камня

      source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.0.1"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.0"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"
gem "semantic-ui-sass"

# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

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

# Use Sass to process CSS
# gem "sassc-rails"

# 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 mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

1

jquery ruby-on-rails ruby ruby-on-rails-7 import-maps

Источник

user4352317 10 янв '22 в 19:17

1 ответ

Другие вопросы по тегам jquery ruby-on-rails ruby ruby-on-rails-7 import-maps

user4352317 10 янв '22 в 19:11 2022-01-10 19:11 · Answer 1 · 2022-01-10 19:11

Я решил эту проблему, вручную обновив источник jquery, закрепленный в importmap.rbиз источника, что оригинал bin/importmap pin jqueryуказал на что было:

https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js

теперь быть

https://code.jquery.com/jquery-3.6.0.min.js

Кроме того, я добавил некоторый код jquery в application.jsдля запуска при загрузке документа (согласно документации на веб-сайте Semantic-UI

      $(document).ready(function(){
  $('.ui.accordion').accordion()});