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

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

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

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

Ruby on Rails 6

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

Bootstrap

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

Q&A

解決済

2回答

1678閲覧

【rails】ModuleNotFoundError: Module not found: Error: Can't resolve 〜 エラーを解消したい

zsk

総合スコア3

Ruby

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

Ruby on Rails 6

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

Bootstrap

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

0グッド

0クリップ

投稿2023/01/12 11:34

編集2023/01/13 18:38

前提

railsで作成中のアプリをRenderでデプロイをしようとしたところ、下記のエラーになりました。
今回初めてbootstrapを導入したのですが、そのモジュールが見つからないと言われているようです。

下記コマンドでインストールをしたのですが、なぜNodeモジュールが追加されないのかわかりません。

$ yarn add bootstrap@next
$ yarn add @popperjs/core

調べてみたのですが初学者のため原因を特定できず、すみませんがどなたか何かわかることがあれば
お力をお借りできますでしょうか。

実現したいこと

Renderでデプロイを完了したい。

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

Render

1Jan 12 07:11:19 PM resolve 'bootstrap' in '/opt/render/project/src/app/javascript/packs' 2Jan 12 07:11:19 PM Parsed request is a module 3Jan 12 07:11:19 PM using description file: /opt/render/project/src/package.json (relative path: ./app/javascript/packs) 4Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 5Jan 12 07:11:19 PM resolve as module 6Jan 12 07:11:19 PM looking for modules in /opt/render/project/src/app/javascript 7Jan 12 07:11:19 PM using description file: /opt/render/project/src/package.json (relative path: ./app/javascript) 8Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 9Jan 12 07:11:19 PM using description file: /opt/render/project/src/package.json (relative path: ./app/javascript/bootstrap) 10Jan 12 07:11:19 PM no extension 11Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 12Jan 12 07:11:19 PM /opt/render/project/src/app/javascript/bootstrap doesn't exist 13Jan 12 07:11:19 PM .mjs 14 15// 省略 // 16 17Jan 12 07:11:19 PM /opt/render/project/src/app/javascript/node_modules doesn't exist or is not a directory 18Jan 12 07:11:19 PM /opt/render/project/src/app/node_modules doesn't exist or is not a directory 19Jan 12 07:11:19 PM /opt/render/project/node_modules doesn't exist or is not a directory 20Jan 12 07:11:19 PM /opt/render/node_modules doesn't exist or is not a directory 21Jan 12 07:11:19 PM /opt/node_modules doesn't exist or is not a directory 22Jan 12 07:11:19 PM /node_modules doesn't exist or is not a directory 23Jan 12 07:11:19 PM looking for modules in /opt/render/project/src/node_modules 24Jan 12 07:11:19 PM using description file: /opt/render/project/src/package.json (relative path: ./node_modules) 25Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 26Jan 12 07:11:19 PM using description file: /opt/render/project/src/package.json (relative path: ./node_modules/bootstrap) 27Jan 12 07:11:19 PM no extension 28Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 29Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap doesn't exist 30Jan 12 07:11:19 PM .mjs 31Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 32Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.mjs doesn't exist 33Jan 12 07:11:19 PM .js 34Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 35Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.js doesn't exist 36Jan 12 07:11:19 PM .sass 37Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 38Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.sass doesn't exist 39Jan 12 07:11:19 PM .scss 40Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 41Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.scss doesn't exist 42Jan 12 07:11:19 PM .css 43Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 44Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.css doesn't exist 45Jan 12 07:11:19 PM .module.sass 46Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 47Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.module.sass doesn't exist 48Jan 12 07:11:19 PM .module.scss 49Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 50Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.module.scss doesn't exist 51Jan 12 07:11:19 PM .module.css 52Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 53Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.module.css doesn't exist 54Jan 12 07:11:19 PM .png 55Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 56Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.png doesn't exist 57Jan 12 07:11:19 PM .svg 58Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 59Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.svg doesn't exist 60Jan 12 07:11:19 PM .gif 61Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 62Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.gif doesn't exist 63Jan 12 07:11:19 PM .jpeg 64Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 65Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.jpeg doesn't exist 66Jan 12 07:11:19 PM .jpg 67Jan 12 07:11:19 PM Field 'browser' doesn't contain a valid alias configuration 68Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap.jpg doesn't exist 69Jan 12 07:11:19 PM as directory 70Jan 12 07:11:19 PM /opt/render/project/src/node_modules/bootstrap doesn't exist 71Jan 12 07:11:19 PM 72Jan 12 07:11:19 PM ==> Build failed 😞 73Jan 12 07:11:19 PM ==> Generating container image from build. This may take a few minutes...

該当のソースコード

//package.json { "name": "sachi_plan", "private": true, "dependencies": { "@rails/actioncable": "^6.0.0-alpha", "@rails/activestorage": "^6.0.0-alpha", "@rails/ujs": "^6.0.0-alpha", "@rails/webpacker": "4.3.0", "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^4.11.1" }, "license": "ISC" }
//javascript<packs<application.js // This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") import "bootstrap" import "../stylesheets/application" // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true)
//javascript<packs<stylesheets<application.scss @import "bootstrap"

試したこと

別件ですが「rails db:migrate」を実行した際に下記エラーが出ており放置していましたが今回のエラーに関係あるのかなと思い、package.jsonに「"license": "ISC"」を追加しました。

warning ../../package.json: No license field

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答2

0

自己解決

Bootstrapのインストール先が誤っており、正しいディレクトリに再インストールをしたところか解決しました。

投稿2023/01/13 09:38

zsk

総合スコア3

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

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

0

フロントエンドもRailsなら(Nuxtを使っていなければ)、yarn add bootstrapになるのではないでしょうか?

Render公式:https://render.com/docs/deploy-rails

投稿2023/01/12 22:36

no1knows

総合スコア3365

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

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

zsk

2023/01/13 09:37

ご回答いただきありがとうございました! こちらインストール先のディレクトリが誤っていたことが原因だったようです。 初歩的なミスでお時間を取らせてしまいすみませんでした!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問