質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

4487閲覧

Rails6でBootstrap導入後、Herokuへデプロイができない

ytommy

総合スコア11

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/04/09 03:00

前提・実現したいこと

Ruby(Ruby on Rails)でレビューサイトを作っています。
Bootstrapを導入した後、Herokuにデプロイしたいのですが、
下記のエラーが発生しました。
Bootstrap導入前はHerokuへ正常にデプロイできておりました。

(環境)
・ruby 2.6.5
・Rails 6.0.2.2
・Windows 10

発生している問題・エラーメッセージ

remote:   Compiling...
remote: Compilation failed:
remote: ModuleNotFoundError: Module not found: Error: Can't resolve 'bootstrap-sprockets' in '/tmp/build_e08a0db1d7b9eb92bbc6b8aacfb53c4a/app/javascript/packs'

.
.(略)
.

remote: resolve 'bootstrap-sprockets' in '/tmp/build_e08a0db1d7b9eb92bbc6b8aacfb53c4a/app/javascript/packs'
remote: Parsed request is a module
remote: using description file: /tmp/build_e08a0db1d7b9eb92bbc6b8aacfb53c4a/package.json (relative path: ./app/javascript/packs)
remote: Field 'browser' doesn't contain a valid alias configuration
remote: resolve as module
remote: looking for modules in /tmp/build_e08a0db1d7b9eb92bbc6b8aacfb53c4a/app/javascript
remote: using description file: /tmp/build_e08a0db1d7b9eb92bbc6b8aacfb53c4a/package.json (relative path: ./app/javascript)
remote: Field 'browser' doesn't contain a valid alias configuration
remote: using description file: /tmp/build_e08a0db1d7b9eb92bbc6b8aacfb53c4a/package.json (relative path: ./app/javascript/bootstrap-sprockets)

.
.(略)
.

remote: !
remote: ! Precompiling assets failed.
remote: !

該当のソースコード

Gemfile

1source 'https://rubygems.org' 2git_source(:github) { |repo| "https://github.com/#{repo}.git" } 3 4ruby '2.6.5' 5gem 'devise', '~> 4.7', '>= 4.7.1' 6gem 'paperclip', '~> 6.1' 7gem 'bootstrap-sass', '~> 3.4', '>= 3.4.1' 8gem 'jquery-rails' 9gem 'sassc-rails' 10gem 'rails', '~> 6.0.2', '>= 6.0.2.2' 11gem 'puma', '~> 4.1' 12gem 'sass-rails', '>= 6' 13gem 'webpacker', '~> 4.0' 14gem 'turbolinks', '~> 5' 15gem 'jbuilder', '~> 2.7' 16gem 'bootsnap', '>= 1.4.2', require: false 17 18group :development, :test do 19 gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] 20 gem 'sqlite3', '~> 1.4' 21end 22 23group :development do 24 gem 'web-console', '>= 3.3.0' 25end 26 27group :test do 28 gem 'capybara', '>= 2.15' 29 gem 'selenium-webdriver' 30 gem 'webdrivers' 31end 32 33group :production do 34gem 'pg', '~> 1.2', '>= 1.2.3' 35end 36 37gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 38

webpackeryml

1# Note: You must restart bin/webpack-dev-server for changes to take effect 2 3default: &default 4 source_path: app/javascript 5 source_entry_path: packs 6 public_root_path: public 7 public_output_path: packs 8 cache_path: tmp/cache/webpacker 9 check_yarn_integrity: false 10 webpack_compile_output: true 11 12 # Additional paths webpack should lookup modules 13 # ['app/assets', 'engine/foo/app/assets'] 14 resolved_paths: [] 15 16 # Reload manifest.json on all requests so we reload latest compiled packs 17 cache_manifest: false 18 19 # Extract and emit a css file 20 extract_css: false 21 22 static_assets_extensions: 23 - .jpg 24 - .jpeg 25 - .png 26 - .gif 27 - .tiff 28 - .ico 29 - .svg 30 - .eot 31 - .otf 32 - .ttf 33 - .woff 34 - .woff2 35 36 extensions: 37 - .mjs 38 - .js 39 - .sass 40 - .scss 41 - .css 42 - .module.sass 43 - .module.scss 44 - .module.css 45 - .png 46 - .svg 47 - .gif 48 - .jpeg 49 - .jpg 50 51development: 52 <<: *default 53 compile: true 54 55 # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules 56 check_yarn_integrity: true 57 58 # Reference: https://webpack.js.org/configuration/dev-server/ 59 dev_server: 60 https: false 61 host: localhost 62 port: 3035 63 public: localhost:3035 64 hmr: false 65 # Inline should be set to true if using HMR 66 inline: true 67 overlay: true 68 compress: true 69 disable_host_check: true 70 use_local_ip: false 71 quiet: false 72 pretty: false 73 headers: 74 'Access-Control-Allow-Origin': '*' 75 watch_options: 76 ignored: '**/node_modules/**' 77 78 79test: 80 <<: *default 81 compile: true 82 83 # Compile test packs to a separate directory 84 public_output_path: packs-test 85 86production: 87 <<: *default 88 89 # Production depends on precompilation of packs prior to booting for performance. 90 compile: false 91 92 # Extract and emit a css file 93 extract_css: true 94 95 # Cache manifest.json for performance 96 cache_manifest: true 97

databaseyml

1# SQLite. Versions 3.8.0 and up are supported. 2# gem install sqlite3 3# 4# Ensure the SQLite 3 gem is defined in your Gemfile 5# gem 'sqlite3' 6# 7default: &default 8 adapter: sqlite3 9 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> 10 timeout: 5000 11 12development: 13 <<: *default 14 database: db/development.sqlite3 15 16# Warning: The database defined as "test" will be erased and 17# re-generated from your development database when you run "rake". 18# Do not set this db to the same as development or production. 19test: 20 <<: *default 21 database: db/test.sqlite3 22 23production: 24 <<: *default 25 adapter: postgresql 26 encoding: unicode 27 port: 5432 28

packagejson

1{ 2 "name": "winereview", 3 "private": true, 4 "dependencies": { 5 "@rails/actioncable": "^6.0.0", 6 "@rails/activestorage": "^6.0.0", 7 "@rails/ujs": "^6.0.0", 8 "@rails/webpacker": "4.2.2", 9 "bootstrap": "^4.4.1", 10 "jquery": "^3.4.1", 11 "popper.js": "^1.16.1", 12 "turbolinks": "^5.2.0" 13 }, 14 "version": "0.1.0", 15 "devDependencies": { 16 "webpack-dev-server": "^3.10.3" 17 } 18 19} 20 21

environmentjs

1const { environment } = require('@rails/webpacker') 2 3const webpack = require('webpack') 4 5 6environment.plugins.append('Provide', new webpack.ProvidePlugin({ 7 $: 'jquery', 8 jQuery: 'jquery', 9 Popper: ['popper.js', 'default'] 10})) 11 12module.exports = environment 13

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

rails5までとRails6とでjqueryやBootstrapの設定方法が大きく異なります。
これは標準のモジュールバンドラがSprocketsからWebpackerへと変わったためです。

そのため現状からの手順としては下記を行うと良いかと思います。

1.BootstrapとjQueryを導入した手順と逆の流れですべて設定を解除
※Viewはそのままで大丈夫

2.下記などを参考にRails6でのBootstrap・jQueryの導入手順を行う
https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a

投稿2020/04/09 03:14

no1knows

総合スコア3365

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ytommy

2020/04/10 01:57

ご回答ありがとうございます。 いくつかの記事の手順通りにやっても解決しなかったのですが、 そもそもWebpackerをインストールしていないことが原因でした。 ありがとうございます。
no1knows

2020/04/10 02:32

あぁ、なるほど。解決してよかったです。
guest

0

Webpackerをインストールしていないことが原因でした。

投稿2020/04/10 09:29

ytommy

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問