Rails new command not working with -j esbuild --css bootstrap

overdrivemachines commented 1 year ago

Steps to reproduce

rails new bs_demo -j esbuild --css bootstrap

Expected behavior

New app should be created without any errors.

Actual behavior

See the error in the last few lines:

      create  
      create  README.md
      create  Rakefile
      create  .ruby-version
      create  config.ru
      create  .gitignore
      create  .gitattributes
      create  Gemfile
         run  git init from "."
Initialized empty Git repository in /home/dipen/Desktop/workspace/bs_demo/.git/
      create  app
      create  app/assets/config/manifest.js
      create  app/assets/stylesheets/application.css
      create  app/channels/application_cable/channel.rb
      create  app/channels/application_cable/connection.rb
      create  app/controllers/application_controller.rb
      create  app/helpers/application_helper.rb
      create  app/jobs/application_job.rb
      create  app/mailers/application_mailer.rb
      create  app/models/application_record.rb
      create  app/views/layouts/application.html.erb
      create  app/views/layouts/mailer.html.erb
      create  app/views/layouts/mailer.text.erb
      create  app/assets/images
      create  app/assets/images/.keep
      create  app/controllers/concerns/.keep
      create  app/models/concerns/.keep
      create  bin
      create  bin/rails
      create  bin/rake
      create  bin/setup
      create  config
      create  config/routes.rb
      create  config/application.rb
      create  config/environment.rb
      create  config/cable.yml
      create  config/puma.rb
      create  config/storage.yml
      create  config/environments
      create  config/environments/development.rb
      create  config/environments/production.rb
      create  config/environments/test.rb
      create  config/initializers
      create  config/initializers/assets.rb
      create  config/initializers/content_security_policy.rb
      create  config/initializers/cors.rb
      create  config/initializers/filter_parameter_logging.rb
      create  config/initializers/inflections.rb
      create  config/initializers/new_framework_defaults_7_0.rb
      create  config/initializers/permissions_policy.rb
      create  config/locales
      create  config/locales/en.yml
      create  config/master.key
      append  .gitignore
      create  config/boot.rb
      create  config/database.yml
      create  db
      create  db/seeds.rb
      create  lib
      create  lib/tasks
      create  lib/tasks/.keep
      create  lib/assets
      create  lib/assets/.keep
      create  log
      create  log/.keep
      create  public
      create  public/404.html
      create  public/422.html
      create  public/500.html
      create  public/apple-touch-icon-precomposed.png
      create  public/apple-touch-icon.png
      create  public/favicon.ico
      create  public/robots.txt
      create  tmp
      create  tmp/.keep
      create  tmp/pids
      create  tmp/pids/.keep
      create  tmp/cache
      create  tmp/cache/assets
      create  vendor
      create  vendor/.keep
      create  test/fixtures/files
      create  test/fixtures/files/.keep
      create  test/controllers
      create  test/controllers/.keep
      create  test/mailers
      create  test/mailers/.keep
      create  test/models
      create  test/models/.keep
      create  test/helpers
      create  test/helpers/.keep
      create  test/integration
      create  test/integration/.keep
      create  test/channels/application_cable/connection_test.rb
      create  test/test_helper.rb
      create  test/system
      create  test/system/.keep
      create  test/application_system_test_case.rb
      create  storage
      create  storage/.keep
      create  tmp/storage
      create  tmp/storage/.keep
      remove  config/initializers/cors.rb
      remove  config/initializers/new_framework_defaults_7_0.rb
         run  bundle install
Fetching gem metadata from https://rubygems.org/...........
Resolving dependencies...
Using rake 13.0.6
Using concurrent-ruby 1.2.2
Using minitest 5.18.0
Using builder 3.2.4
Using bindex 0.8.1
Using timeout 0.3.2
Using msgpack 1.7.0
Using bundler 2.4.12
Using matrix 0.4.2
Using regexp_parser 2.8.0
Using method_source 1.0.0
Using thor 1.2.1
Using zeitwerk 2.6.7
Using io-console 0.6.0
Using rexml 3.2.5
Using rubyzip 2.3.2
Using websocket 1.2.9
Using sqlite3 1.6.2 (x86_64-linux)
Using i18n 1.13.0
Using tzinfo 2.0.6
Using erubi 1.12.0
Using net-protocol 0.2.1
Using bootsnap 1.16.0
Using reline 0.3.3
Using selenium-webdriver 4.9.0
Using net-smtp 0.3.3
Using irb 1.6.4
Using marcel 1.0.2
Using debug 1.7.2
Using mini_mime 1.1.2
Using date 3.3.3
Using public_suffix 5.0.1
Using net-imap 0.3.4
Using racc 1.6.2
Using crass 1.0.6
Using rack 2.2.7
Using net-pop 0.1.2
Using rack-test 2.1.0
Using sprockets 4.2.0
Using websocket-extensions 0.1.5
Using activesupport 7.0.4.3
Using websocket-driver 0.7.5
Using mail 2.8.1
Using nokogiri 1.14.3 (x86_64-linux)
Using addressable 2.8.4
Using rails-dom-testing 2.0.3
Using loofah 2.20.0
Using globalid 1.1.0
Using rails-html-sanitizer 1.5.0
Using activejob 7.0.4.3
Using xpath 3.2.0
Using webdrivers 5.2.0
Using nio4r 2.5.9
Using actionview 7.0.4.3
Using capybara 3.39.0
Using actionpack 7.0.4.3
Using jbuilder 2.11.5
Using puma 5.6.5
Using activemodel 7.0.4.3
Using sprockets-rails 3.4.2
Using activerecord 7.0.4.3
Using actionmailer 7.0.4.3
Using railties 7.0.4.3
Using actioncable 7.0.4.3
Using activestorage 7.0.4.3
Using actionmailbox 7.0.4.3
Using actiontext 7.0.4.3
Using cssbundling-rails 1.1.2
Using jsbundling-rails 1.1.1
Using stimulus-rails 1.2.1
Using turbo-rails 1.4.0
Using web-console 4.2.0
Using rails 7.0.4.3
Bundle complete! 16 Gemfile dependencies, 73 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle binstubs bundler
       rails  javascript:install:esbuild
Compile into app/assets/builds
      create  app/assets/builds
      create  app/assets/builds/.keep
      append  app/assets/config/manifest.js
      append  .gitignore
      append  .gitignore
Add JavaScript include tag in application layout
      insert  app/views/layouts/application.html.erb
Create default entrypoint in app/javascript/application.js
      create  app/javascript
      create  app/javascript/application.js
Add default package.json
      create  package.json
Add default Procfile.dev
      create  Procfile.dev
Ensure foreman is installed
         run  gem install foreman from "."
Successfully installed foreman-0.87.2
1 gem installed
Add bin/dev to start foreman
      create  bin/dev
Install esbuild
         run  yarn add esbuild from "."
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 1s 962ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ esbuild@npm:0.17.18 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ @esbuild/linux-x64@npm:0.17.18 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0007: │ esbuild@npm:0.17.18 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 0s 490ms
➤ YN0000: Done in 2s 546ms
Add build script
         run  npm pkg set scripts.build="esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets" from "."
         run  yarn build from "."

  app/assets/builds/application.js      62b 
  app/assets/builds/application.js.map  93b 

⚡ Done in 52ms
       rails  turbo:install stimulus:install
Import Turbo
      append  app/javascript/application.js
Install Turbo
         run  yarn add @hotwired/turbo-rails from "."
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 545ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ @hotwired/turbo-rails@npm:7.3.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ @hotwired/turbo@npm:7.3.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ @rails/actioncable@npm:7.0.4 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: Done in 0s 710ms
Run turbo:install:redis to switch on Redis and use it in development for turbo streams
Create controllers directory
      create  app/javascript/controllers
      create  app/javascript/controllers/index.js
      create  app/javascript/controllers/application.js
      create  app/javascript/controllers/hello_controller.js
Import Stimulus controllers
      append  app/javascript/application.js
Install Stimulus
         run  yarn add @hotwired/stimulus from "."
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ @hotwired/stimulus@npm:3.2.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: Done in 0s 330ms
       rails  css:install:bootstrap
Build into app/assets/builds
       exist  app/assets/builds
   identical  app/assets/builds/.keep
File unchanged! The supplied flag value not found!  app/assets/config/manifest.js
Stop linking stylesheets automatically
        gsub  app/assets/config/manifest.js
File unchanged! The supplied flag value not found!  .gitignore
File unchanged! The supplied flag value not found!  .gitignore
Remove app/assets/stylesheets/application.css so build output can take over
      remove  app/assets/stylesheets/application.css
Add stylesheet link tag in application layout
File unchanged! The supplied flag value not found!  app/views/layouts/application.html.erb
      append  Procfile.dev
Add bin/dev to start foreman
   identical  bin/dev
Install Bootstrap with Bootstrap Icons and Popperjs/core
      create  app/assets/stylesheets/application.bootstrap.scss
         run  yarn add sass bootstrap bootstrap-icons @popperjs/core from "."
➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ @npmcli/move-file@npm:2.0.1 is deprecated: This functionality has been moved to @npmcli/fs
➤ YN0000: └ Completed in 3s 498ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ util-deprecate@npm:1.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ which@npm:2.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ wide-align@npm:1.1.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ wrappy@npm:1.0.2 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
➤ YN0000: └ Completed in 0s 355ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 330ms
➤ YN0000: Done with warnings in 4s 226ms
      insert  config/initializers/assets.rb
Appending Bootstrap JavaScript import to default entry point
      append  app/javascript/application.js
Add build:css script
         run  npm pkg set scripts.build:css="sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" from "."
         run  yarn build:css from "."
Error: Can't find stylesheet to import.
  ╷
1 │ @import 'bootstrap/scss/bootstrap';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  app/assets/stylesheets/application.bootstrap.scss 1:9  root stylesheet

Error is also seen after running 'bin/dev' in terminal:

23:41:32 web.1  | started with pid 132175
23:41:32 js.1   | started with pid 132176
23:41:32 css.1  | started with pid 132178
23:41:32 js.1   | [watch] build finished, watching for changes...
23:41:32 web.1  | => Booting Puma
23:41:32 web.1  | => Rails 7.0.4.3 application starting in development 
23:41:32 web.1  | => Run `bin/rails server --help` for more startup options
23:41:33 web.1  | Puma starting in single mode...
23:41:33 web.1  | * Puma version: 5.6.5 (ruby 3.2.2-p53) ("Birdie's Version")
23:41:33 web.1  | *  Min threads: 5
23:41:33 web.1  | *  Max threads: 5
23:41:33 web.1  | *  Environment: development
23:41:33 web.1  | *          PID: 132177
23:41:33 web.1  | * Listening on http://127.0.0.1:3000
23:41:33 web.1  | * Listening on http://[::1]:3000
23:41:33 web.1  | Use Ctrl-C to stop
23:41:33 css.1  | Error: Can't find stylesheet to import.
23:41:33 css.1  |   ╷
23:41:33 css.1  | 1 │ @import 'bootstrap/scss/bootstrap';
23:41:33 css.1  |   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
23:41:33 css.1  |   ╵
23:41:33 css.1  |   app/assets/stylesheets/application.bootstrap.scss 1:9  root stylesheet
23:41:33 css.1  | 
23:41:33 css.1  | Sass is watching for changes. Press Ctrl-C to stop.
23:41:33 css.1  |

System configuration

Rails version: Rails 7.0.4.3

Ruby version: ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-linux]

nleo commented 1 year ago

same here

empty js build

I tryed this https://www.bootrails.com/blog/rails-7-bootstrap-5-tutorial/ and this https://masterpro.ws/forum/ruby-ruby-on-rails/5142-rails-7-legkie-puti-installyatsii-bootstrap-5-bez-esbuild-node-yarn but got only this

Every ~ half a year I try to figure it out https://github.com/rails/rails/issues/45605 but always decide that it should'n be so difficult and don't woth it and give up

zzak commented 1 year ago

This is just a guess, but it seems like this step isn't actually adding the bootstrap or sass packages:

     run  yarn add sass bootstrap bootstrap-icons @popperjs/core from "."

jesusangelm commented 1 year ago

I don't know much about the javascript/node ecosystem, but i noticed when i created a new rails project with bootstrap, this does not have a node_modules folder, even when i run yarn install.

So i tried with a simple npm install and now i have a node_modules folder, but yarn build:css still fails with the same error, so i tried a yarn install again. now this is doing something.

I ran bin/dev or yarn build:css and now everything works as expected.

hahmed commented 1 year ago

What node version are you using?

If you have nvm installed for example, what does nvm current output? Is it system -- that's generally a common issue with installing dependencies.

Also...

What yarn version are you using? yarn --version
What npx version are you using? npx --version source (https://github.com/rails/cssbundling-rails#installation)

rails-bot[bot] commented 1 year ago

This issue has been automatically closed because there has been no follow-up response from the original author. We currently don't have enough information in order to take action. Please reach out if you have any additional information that will help us move this issue forward.

code-206 commented 1 year ago

had the same issue yesterday with 7.0.5 rails new app_name -j esbuild --css bootstrap

but today another approach went well. rails new app_name --css bootstrap -j esbuild

rails / rails