83051


Rails + Webpacker の使い方に慣れていなくて  
試行錯誤するとすぐにわけがわからなくなるので  
毎回以下のように ruby しか入ってない状態から docker を作り直しています

[code]

    FROM ruby:3.0.1
    RUN apt-get update
    
    RUN apt-get install -y build-essential curl git zlib1g-dev libssl-dev libreadline-dev ruby-dev vim tzdata wget nodejs npm
    
    RUN npm install n -g
    RUN n stable
    RUN apt purge -y nodejs npm
    
    RUN npm install yarn -g --force 
    RUN gem install rails
    
    # ここから Rails の中の構築
    
    RUN rails new testapp
    WORKDIR testapp
    RUN bundle install
    RUN yarn install --check-files
    RUN rails webpacker:install
    
    RUN touch app/javascript/packs/application.scss
    
    RUN echo 'import "./application.scss";' >> app/javascript/packs/application.js
    RUN echo 'console.log("application.js");' >> app/javascript/packs/application.js
    
    RUN rails g controller top index
    
    ############
    
    RUN yarn add bootstrap
    RUN yarn add @popperjs/core
    
    RUN echo 'require("bootstrap");' >> app/javascript/packs/application.js
    RUN echo 'console.log(bootstrap.Tab);' >> app/javascript/packs/application.js
    
    ENTRYPOINT ["bin/rails", "s", "-b", "0.0.0.0"]
    
[/code]

application.js の中がこんな感じなんですが

[code]

    import Rails from "@rails/ujs"
    import Turbolinks from "turbolinks"
    import * as ActiveStorage from "@rails/activestorage"
    import "channels"
    
    Rails.start()
    Turbolinks.start()
    ActiveStorage.start()
    import "./application.scss";
    
    require('bootstrap');
    console.log(bootstrap.Tab);
    
[/code]

この状態で /top/index を開くと

[code]

    application.js:17 Uncaught ReferenceError: bootstrap is not defined
        at Module../app/javascript/packs/application.js (application.js:17)
        at __webpack_require__ (bootstrap:19)
        at Object.0 (module.js:24)
        at __webpack_require__ (bootstrap:19)
        at bootstrap:83
        at bootstrap:83
    
[/code]

となります

view に

[code]

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    
[/code]

を追加すればエラーが消えて bootstrap というグローバル変数にアクセスできます

CDN ではなく webpacker で bootstrap の JS を使うにはどうすればいいのでしょうか

`yarn add bootstrap`  
して  
`require('bootstrap')`  
とかくだけでは使えないのでしょうか

* * *

bootstrap css だけはすでに使えたので CSS 関連はスキップしています

Rails6 webpacker で bootstrap 導入してるブログいくつかみたんですが  
どこも bootstrap タグをつけてで表示して終わりで  
JS から操作する部分まで確認してるものがみあたらないんですよね


CC BY-SA 4.0
2021-10-11T09:40:11.907
83006
2021-10-12T14:14:12.750
2021-10-11T09:54:14.630
question
ruby-on-rails bootstrap webpacker
Rails6 webpacker から bootstrap js を使う方法


require して返り値を受け取ってないからでは無いでしょうか。

[code]

    const bootstrap = require(“bootstrap”);
    console.log(bootstrap.Tab);
    
[/code]

みたいにすると大丈夫そうな気がします。

ところで今後はes6の文法で書く方がより良いと思います。  
公式にも下記のような書き方が推奨されてます。

[code]

    import * as bootstrap from 'bootstrap';
    
[/code]

<https://getbootstrap.com/docs/5.1/getting-started/webpack/>


CC BY-SA 4.0
2021-10-12T14:14:12.750
83051
2021-10-12T14:14:12.750
8329
83006
answer