Rails 7、Importmaps、AOS.js が機能しない

概要

このテンプレートをここからダウンロードしました https://bootstrapmade.com/regna-bootstrap-onepage-template/

私の目標は、Rails 7で実行することです。index.htmlのコンテンツをexperiment.erb.htmlにコピーしました。

そして、JavaScriptのコンテンツをアプリのJavaScriptにコピーしました。

私のimportmap.rbは次のようになります

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_all_from "app/javascript/controllers", under: "controllers"
pin "bootstrap", to: "https://ga.jspm.io/npm:[email protected]/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/[email protected]/dist/esm/index.js" # use unpkg.com as ga.jspm.io contains a broken popper package

pin_all_from "app/javascript/aos", under: "aos"
pin_all_from "app/javascript/purecounter", under: "purecounter"
pin_all_from "app/javascript/glightbox", under: "glightbox"
pin_all_from "app/javascript/isotope", under: "isotope"
pin_all_from "app/javascript/swiper", under: "swiper"
pin_all_from "app/javascript/main", under: "main"

私の 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 'bootstrap';

import 'aos/aos';
import 'purecounter/purecounter_vanilla';
import 'glightbox/glightbox';
import 'isotope/isotope';
import 'swiper/swiper-bundle.min';
import 'main/main';
 

Chrome ブラウザのエラー メッセージは次のとおりです

aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1 Uncaught TypeError: Cannot set properties of undefined (setting 'AOS')
    at aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1:182
    at aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1:187
(anonymous) @ aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1
(anonymous) @ aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1 

[vscode 1 のファイル構造

何を修正しなければならないか知っている場合は、説明してください。

解決策

レール 7

./bin/importmap pin aos

インポートマップ.rb

pin 'aos', to: 'aos.js', preload: true

=> ベンダー/javascript/aos.js

アプリケーション.js

import AOS from 'aos';
document.addEventListener('turbo:load', () => { AOS.init() });

構成/アセット

Rails.application.config.assets.precompile += %w[aos.js]

私にとっては役に立ちます。