Rails7で'rails new'するさいにBootstrapを指定するとエラーが発生してしまう

環境

• ruby: ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-darwin21]
• rails: Rails 7.0.6
• node: v15.14.0
• yarn: 1.22.19

現状

rails new . -c=bootstrap

最後でこのようなエラーが出る

yarn run v1.22.19
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
rbenv: sass: command not found

The `sass' command exists in these Ruby versions:
  2.5.1
  2.6.3
  2.6.4
  2.6.6
  2.7.4

error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Add build:css:prefix script
         run  npm set-script build:css:prefix "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css" from "."
         run  yarn build:css:prefix from "."
yarn run v1.22.19
$ postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css
/bin/sh: postcss: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Add build:css script
         run  npm set-script build:css "yarn build:css:compile && yarn build:css:prefix" from "."
         run  yarn build:css from "."
yarn run v1.22.19
$ yarn build:css:compile && yarn build:css:prefix
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
rbenv: sass: command not found

The `sass' command exists in these Ruby versions:
  2.5.1
  2.6.3
  2.6.4
  2.6.6
  2.7.4

error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Add watch:css script
         run  npm set-script watch:css "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\"" from "."
        gsub  Procfile.dev
Add browserslist config
         run  npm pkg set browserslist[]=defaults from "."
Unknown command: "pkg"

To see a list of supported npm commands, run:
  npm help

ここから./bin/devでローカルを立ち上げようとすると下記のようなエラーが出る

23:02:40 js.1   | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --watch
23:02:40 css.1  | $ nodemon --watch ./app/assets/stylesheets/ --ext scss --exec "yarn build:css"
23:02:40 css.1  | /bin/sh: nodemon: command not found
23:02:40 css.1  | error Command failed with exit code 127.
23:02:40 css.1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
23:02:40 js.1   | [watch] build finished, watching for changes...
23:02:40 js.1   | ✘ [ERROR] Could not resolve "bootstrap"
23:02:40 js.1   | 
23:02:40 js.1   |     app/javascript/application.js:4:27:
23:02:40 js.1   |       4 │ import * as bootstrap from "bootstrap"
23:02:40 js.1   |         ╵                            ~~~~~~~~~~~
23:02:40 js.1   | 
23:02:40 js.1   |   You can mark the path "bootstrap" as external to exclude it from the bundle, which will remove this error.
23:02:40 js.1   | 
23:02:40 js.1   | 1 error

原因

これは生成された新規プロジェクトのpackage.jsonに必要なパッケージが追加されていない

package.json

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/turbo-rails": "^7.3.0",
    "esbuild": "^0.18.17"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  }
}

ここに『sass』『postcss』『nodemon』などのパッケージが入っていないため、エラーになってしまう。

解決策

おそらく、上記のパッケージを後から追加すれば動くかもしれないが、今回は別の手段を取る

それは、yarnのバージョンを3系に上げてからrails newすることになる

詳しくは下記の記事を参照

yarnのバージョンの上げ方

新規フォルダを作成し、そこでyarnのバージョンを上げるコマンドを打つ

yarn set version berry

yarn v2本体のグローバルインストールは原則として行わず、 yarn v1からロードして使うことが推奨されてるようなので、プロジェクト立ち上げるさいは、都度やる必要あり（？）

すると、yarnのバージョンが上がるはずなので、yarn -vで確認

3.6.1

3系に上がっていたらyarnのバージョンを上げるコマンドを打ったさいに生成された.yarnrc.ymlに下記を追加

.yarnrc.yml

nodeLinker: node-modules

それからrails newをするとエラーなく新規プロジェクトが生成される

Install Bootstrap with Bootstrap Icons, Popperjs/core and Autoprefixer
      create  app/assets/stylesheets/application.bootstrap.scss
         run  yarn add sass bootstrap bootstrap-icons @popperjs/core postcss postcss-cli autoprefixer nodemon from "."
➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0000: └ Completed in 3s 184ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ y18n@npm:5.0.8 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yaml@npm:2.3.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs-parser@npm:21.1.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:17.7.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 0s 415ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 1s 650ms
➤ YN0000: Done with warnings in 5s 284ms
      insert  config/initializers/assets.rb
Appending Bootstrap JavaScript import to default entry point
      append  app/javascript/application.js
Add build:css:compile script
         run  npm set-script build:css:compile "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" from "."
         run  yarn build:css:compile from "."
Add build:css:prefix script
         run  npm set-script build:css:prefix "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css" from "."
         run  yarn build:css:prefix from "."
Add build:css script
         run  npm set-script build:css "yarn build:css:compile && yarn build:css:prefix" from "."
         run  yarn build:css from "."
Add watch:css script
         run  npm set-script watch:css "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\"" from "."
        gsub  Procfile.dev
Add browserslist config
         run  npm pkg set browserslist[]=defaults from "."
Unknown command: "pkg"

To see a list of supported npm commands, run:
  npm help

このときのpackage.jsonの中身は以下になる

package.json

{
  "packageManager": "yarn@3.6.1",
  "dependencies": {
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/turbo-rails": "^7.3.0",
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.14",
    "bootstrap": "^5.3.1",
    "bootstrap-icons": "^1.10.5",
    "esbuild": "^0.18.17",
    "nodemon": "^3.0.1",
    "postcss": "^8.4.27",
    "postcss-cli": "^10.1.0",
    "sass": "^1.64.1"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
    "build:css": "yarn build:css:compile && yarn build:css:prefix",
    "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
  },
  "browserslist": [
    "defaults"
  ]
}

『sass』『postcss』『nodemon』などのパッケージが含まれているのがわかる

これでローカルも立ち上がる