0

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

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"]

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

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);

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

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

となります

view に

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

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

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

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


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

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

1 件の回答 1

3

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

const bootstrap = require(“bootstrap”);
console.log(bootstrap.Tab);

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

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

import * as bootstrap from 'bootstrap';

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

1
  • ありがとうございます! うまくいきました bootstrap の中にドキュメントがあったのですね
    – user35303
    Commented 2021年10月12日 14:20

この質問に回答するには、ログインする必要があります。