New 7.0.1 project with --css bootstrap in not working when using old npm versions

[thebravoman]

Steps to reproduce

$ rails _7.0.1_ new aProject --css bootstrap
$ cd aProject/
$ subl app/controllers/home_controller.rb
# Add the following content
class HomeController < ApplicationController

  def index
  end

end
$ mkdir app/views/home
$ subl app/views/home/index.html.erb
# add the following content
<h1>The home page</h1>

$ subl config/routes.rb
# Set the following content
Rails.application.routes.draw do
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  root "home#index"
end

$ rails s

Expected behavior

Application to show "The home page"

Actual behavior

ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.
):
     6:     <%= csrf_meta_tags %>
     7:     <%= csp_meta_tag %>
     8: 
     9:     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    10:     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
    11:   </head>
    12: 
 
app/views/layouts/application.html.erb:9

System configuration

Rails version: 7.0.1

Ruby version: 2.7.4

Comments

I see there is app/assets/stylesheets/application.bootstrap.scss. That's good. But the project as it is created can not be started. Additional things should be done

Would it be a good idea to have the newly created project working after creating it or this is an expected behavior?

Update 1:
Note that running

$ yarn build:css --watch
yarn run v1.22.4
warning ../../../../package.json: No license field
error Command "build:css" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

is again an error.
Command taken form https://github.com/rails/cssbundling-rails

Update 2:
./bin/dev is same error

$ ./bin/dev 
18:15:05 web.1  | started with pid 1253893
18:15:05 js.1   | started with pid 1253894
18:15:05 css.1  | started with pid 1253898
18:15:07 js.1   | yarn run v1.22.4
18:15:07 css.1  | yarn run v1.22.4
18:15:08 css.1  | warning ../../../../package.json: No license field
18:15:08 js.1   | warning ../../../../package.json: No license field
18:15:08 css.1  | error Command "build:css" not found.
18:15:08 css.1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
18:15:08 js.1   | error Command "build" not found.
18:15:08 js.1   | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
18:15:08 js.1   | exited with code 1
18:15:08 system | sending SIGTERM to all processes
18:15:08 css.1  | exited with code 1
18:15:09 web.1  | terminated by SIGTERM

Update 3:
my NPM versoin was 6.X
I move to 8.3.0 and yarn build:css worked correctly

Update 4:
Stopped server. Installed bootstrap again with

./bin/rails css:install:bootstrap

Installed js esbuild again with

./bin/rails javascript:install:esbuild

Started server again and it worked.
Then it started.

My suggestion with this issue is think of a better error when installing that would check for npm version.

[dhh]

When the npm version is too low, we output instructions during the setup on what you have to do instead: https://github.com/rails/cssbundling-rails/blob/main/lib/install/bootstrap/install.rb#L16-L21. I can see how that might be easy to miss, though. So feel free to explore ways to make it easier to diagnose with a PR 👍

[thebravoman]

How do you feel about stopping the process if npx is < 7.1? Like having to specify --skip-npx-check if you really know what you are doing and would like to use npm with lower version.

Would this be against any of the doctrines?

[dhh]

That's not going to fly since this installer is called as part of "rails new", which would leave us with an incomplete skeleton generation. Also, the remedy is already noted as part of the output: You have to add this line yourself. But we can try to find a way to make that notice more prominent.

[thebravoman]

The notice is part of the output, it is last and is in green. I guess I missed it as I was not expecting it.

All the messages that are green are:

Fetching turbo-rails 1.0.1
...
Installing turbo-rails 1.0.1
Bundle complete! 16 Gemfile dependencies, 75 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
...
Add "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds" } to your package.json
...
Bundle complete! 17 Gemfile dependencies, 76 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
...
Add "scripts": { "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules" } to your package.json

There are some red messages like

File unchanged! The supplied flag value not found!  app/assets/config/manifest.js
...
File unchanged! The supplied flag value not found!  .gitignore
File unchanged! The supplied flag value not found!  .gitignore
...
File unchanged! The supplied flag value not found!  app/views/layouts/application.html.erb

A good idea might be to make the notice yellow (as a 'warning') or red (as a bigger warning)

How about?

say %(Add "scripts": { "build:css": "#{build_script}" } to your package.json), :yellow # or :red

I could prepare a PR for it.

I've searched the code in the rails organization that uses 'say' with a color other than green and could not find a case of yellow. There are some examples for :red like

cssbundling-rails/lib/install/bootstrap/install.rb:  say %(Add import * as bootstrap from "bootstrap" to your entry point JavaScript file), :red
tailwindcss-rails/lib/install/tailwindcss.rb: say "Default application.html.erb is missing!", :red 
importmap-rails/lib/install/install.rb: say "Default application.html.erb is missing!", :red 

Probably this

say %(Add "scripts": { "build:css": "#{build_script}" } to your package.json 

is as important as

cssbundling-rails/lib/install/bootstrap/install.rb:  say %(Add import * as bootstrap from "bootstrap" to your entry point JavaScript file), :red

and deserves to be red and consistent.

Let me know if you think this could be a reasonable improvement.

[dhh]

Like changing this to red for the "add scripts" 👍