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

Question

前提

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

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

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

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

実現したいこと

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

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

Jan 12 07:11:19 PM  resolve 'bootstrap' in '/opt/render/project/src/app/javascript/packs'
Jan 12 07:11:19 PM    Parsed request is a module
Jan 12 07:11:19 PM    using description file: /opt/render/project/src/package.json (relative path: ./app/javascript/packs)
Jan 12 07:11:19 PM      Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM      resolve as module
Jan 12 07:11:19 PM        looking for modules in /opt/render/project/src/app/javascript
Jan 12 07:11:19 PM          using description file: /opt/render/project/src/package.json (relative path: ./app/javascript)
Jan 12 07:11:19 PM            Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM            using description file: /opt/render/project/src/package.json (relative path: ./app/javascript/bootstrap)
Jan 12 07:11:19 PM              no extension
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/app/javascript/bootstrap doesn't exist
Jan 12 07:11:19 PM              .mjs

//　省略   //

Jan 12 07:11:19 PM        /opt/render/project/src/app/javascript/node_modules doesn't exist or is not a directory
Jan 12 07:11:19 PM        /opt/render/project/src/app/node_modules doesn't exist or is not a directory
Jan 12 07:11:19 PM        /opt/render/project/node_modules doesn't exist or is not a directory
Jan 12 07:11:19 PM        /opt/render/node_modules doesn't exist or is not a directory
Jan 12 07:11:19 PM        /opt/node_modules doesn't exist or is not a directory
Jan 12 07:11:19 PM        /node_modules doesn't exist or is not a directory
Jan 12 07:11:19 PM        looking for modules in /opt/render/project/src/node_modules
Jan 12 07:11:19 PM          using description file: /opt/render/project/src/package.json (relative path: ./node_modules)
Jan 12 07:11:19 PM            Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM            using description file: /opt/render/project/src/package.json (relative path: ./node_modules/bootstrap)
Jan 12 07:11:19 PM              no extension
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap doesn't exist
Jan 12 07:11:19 PM              .mjs
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.mjs doesn't exist
Jan 12 07:11:19 PM              .js
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.js doesn't exist
Jan 12 07:11:19 PM              .sass
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.sass doesn't exist
Jan 12 07:11:19 PM              .scss
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.scss doesn't exist
Jan 12 07:11:19 PM              .css
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.css doesn't exist
Jan 12 07:11:19 PM              .module.sass
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.module.sass doesn't exist
Jan 12 07:11:19 PM              .module.scss
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.module.scss doesn't exist
Jan 12 07:11:19 PM              .module.css
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.module.css doesn't exist
Jan 12 07:11:19 PM              .png
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.png doesn't exist
Jan 12 07:11:19 PM              .svg
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.svg doesn't exist
Jan 12 07:11:19 PM              .gif
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.gif doesn't exist
Jan 12 07:11:19 PM              .jpeg
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.jpeg doesn't exist
Jan 12 07:11:19 PM              .jpg
Jan 12 07:11:19 PM                Field 'browser' doesn't contain a valid alias configuration
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap.jpg doesn't exist
Jan 12 07:11:19 PM              as directory
Jan 12 07:11:19 PM                /opt/render/project/src/node_modules/bootstrap doesn't exist
Jan 12 07:11:19 PM  
Jan 12 07:11:19 PM  ==> Build failed 😞
Jan 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/ツールのバージョンなど）

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

Answer 1

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

Answer 2

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

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

Comments

[zsk]

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