Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

when creating a new rails 7.1 with bun, the JS side errors out on foreman (bin/dev) #49522

Closed
whyczz opened this issue Oct 7, 2023 · 17 comments

Comments

@whyczz
Copy link

whyczz commented Oct 7, 2023

After creating a new rails 7.1 app with bun enabled, the generated package.json doesn't have @hotwired/turbo-rails added, so the Procfile.dev fails on the js process/container.

Steps to reproduce

➜ rails new pot -j bun -c tailwind

Expected behavior

I should get the Procfile.dev to be up and running.

Actual behavior

The JS process fails:

pot on  main [?] via ⬢ v18.15.0 via 🍞 v1.0.4 via 💎 v3.2.2 
➜ bin/dev 
20:14:02 web.1  | started with pid 9278
20:14:02 js.1   | started with pid 9279
20:14:02 css.1  | started with pid 9280
20:14:02 js.1   | $ bun bun.config.js --watch
20:14:02 css.1  | $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify --watch
20:14:02 js.1   | Build failed
20:14:02 js.1   | 
20:14:02 js.1   | 
20:14:02 js.1   | error: Could not resolve: "@hotwired/turbo-rails". Maybe you need to "bun install"?
20:14:02 js.1   | 
20:14:02 js.1   | import "@hotwired/turbo-rails"
20:14:02 js.1   |        ^
20:14:02 js.1   | /Users/by/w/pot/app/javascript/application.js:2:8 64
20:14:02 css.1  | 
20:14:02 css.1  | Rebuilding...
20:14:02 css.1  | 
20:14:02 css.1  | Done in 103ms.
20:14:02 web.1  | DEBUGGER: Debugger can attach via UNIX domain socket (/var/folders/4p/zm2r8q_x41d8tvt4n3d1b_fh0000gn/T/ruby-debug-sock-501/ruby-debug-by-9278)
20:14:02 web.1  | => Booting Puma
20:14:02 web.1  | => Rails 7.1.0 application starting in development 
20:14:02 web.1  | => Run `bin/rails server --help` for more startup options
20:14:02 web.1  | Puma starting in single mode...
20:14:02 web.1  | * Puma version: 6.4.0 (ruby 3.2.2-p53) ("The Eagle of Durango")
20:14:02 web.1  | *  Min threads: 5
20:14:02 web.1  | *  Max threads: 5
20:14:02 web.1  | *  Environment: development
20:14:02 web.1  | *          PID: 9278
20:14:02 web.1  | * Listening on http://127.0.0.1:3000
20:14:02 web.1  | * Listening on http://[::1]:3000
20:14:02 web.1  | Use Ctrl-C to stop

Fix

Add the two hotwired packages:

➜ bun a @hotwired/turbo-rails
bun add v1.0.4 (745b6b94)

 installed @hotwired/turbo-rails@7.3.0


 3 packages installed [2.41s]

➜ bun a @hotwired/stimulus   
bun add v1.0.4 (745b6b94)

 installed @hotwired/stimulus@3.2.2


 1 packages installed [1353.00ms]

And here's the updated package.json:

{
  "name": "app",
  "private": "true",
  "scripts": {
    "build": "bun bun.config.js",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  },
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^7.3.0",
    "autoprefixer": "latest",
    "postcss": "latest",
    "tailwindcss": "latest"
  }
}

System configuration

Rails version: 7.1

Ruby version: 3.2.2

@whyczz whyczz changed the title when created a new rails 7.1 with bun, the JS side errors out on foreman (bin/dev) when creating a new rails 7.1 with bun, the JS side errors out on foreman (bin/dev) Oct 7, 2023
@paulreece
Copy link
Contributor

paulreece commented Oct 7, 2023

Hey, thanks for reporting the issue.

So I ran your script rails new pot -j bun -c tailwind to create the app and then started the server and got no errors.

It also generated a package.json equivalent to the corrected one you noted.

{
  "name": "app",
  "scripts": {
    "build": "bun bun.config.js",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  },
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^7.3.0",
    "autoprefixer": "latest",
    "postcss": "latest",
    "tailwindcss": "latest"
  }
}

System configuration

Rails version: 7.1

Ruby version: 3.2.2

@paulreece paulreece added the more-information-needed When reporter needs to provide more information label Oct 7, 2023
@paulreece
Copy link
Contributor

Can you share what's in your Procfile.dev?

@whyczz
Copy link
Author

whyczz commented Oct 7, 2023

Hmm, I just ran that again:

➜ rails new zot -j bun -c tailwind 
      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 /Users/by/w/zot/.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  Dockerfile
      create  .dockerignore
      create  bin/docker-entrypoint
      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_1.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_1.rb
         run  bundle install
Fetching gem metadata from https://rubygems.org/...........
Resolving dependencies...
Bundle complete! 15 Gemfile dependencies, 83 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle lock --add-platform=x86_64-linux
Fetching gem metadata from https://rubygems.org/.........
Resolving dependencies...
Writing lockfile to /Users/by/w/zot/Gemfile.lock
         run  bundle lock --add-platform=aarch64-linux
Fetching gem metadata from https://rubygems.org/.........
Resolving dependencies...
Writing lockfile to /Users/by/w/zot/Gemfile.lock
         run  bundle binstubs bundler
       rails  javascript:install:bun
       apply  /Users/by/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/jsbundling-rails-1.2.1/lib/install/install.rb
  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 bin/dev to start foreman
      create    bin/dev
         run  bundle install
Bundle complete! 15 Gemfile dependencies, 83 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle lock --add-platform=x86_64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
         run  bundle lock --add-platform=aarch64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
       apply  /Users/by/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/jsbundling-rails-1.2.1/lib/install/bun/install.rb
  Add default Procfile.dev
      create    Procfile.dev
  Ensure foreman is installed
         run    gem install foreman from "."
Successfully installed foreman-0.87.2
Parsing documentation for foreman-0.87.2
Done installing documentation for foreman after 0 seconds
1 gem installed
  Add default bun.config.js
      create    bun.config.js
  Add build script to package.json
  Add ability to diff lockb to .gitattributes
      append    .gitattributes
  Run `git config diff.lockb.textconv bun && git config diff.lockb.binary true` to enable pretty diffs for Bun's .lockb file
         run  bundle install
Bundle complete! 15 Gemfile dependencies, 83 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle lock --add-platform=x86_64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
         run  bundle lock --add-platform=aarch64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
       rails  turbo:install stimulus:install
       apply  /Users/by/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/turbo-rails-1.4.0/lib/install/turbo_with_node.rb
  Import Turbo
      append    app/javascript/application.js
  Install Turbo
         run    yarn add @hotwired/turbo-rails from "."
         run  bundle install
Bundle complete! 15 Gemfile dependencies, 83 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle lock --add-platform=x86_64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
         run  bundle lock --add-platform=aarch64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
Run turbo:install:redis to switch on Redis and use it in development for turbo streams
       apply  /Users/by/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/stimulus-rails-1.2.2/lib/install/stimulus_with_node.rb
  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 "."
         run  bundle install
Bundle complete! 15 Gemfile dependencies, 83 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle lock --add-platform=x86_64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
         run  bundle lock --add-platform=aarch64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
       rails  css:install:tailwind
       apply  /Users/by/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/cssbundling-rails-1.3.3/lib/install/install.rb
  Build into app/assets/builds
       exist    app/assets/builds
   identical    app/assets/builds/.keep
File unchanged! Either the supplied flag value not found or the content has already been inserted!    app/assets/config/manifest.js
  Stop linking stylesheets automatically
        gsub    app/assets/config/manifest.js
File unchanged! Either the supplied flag value not found or the content has already been inserted!    .gitignore
File unchanged! Either the supplied flag value not found or the content has already been inserted!    .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! Either the supplied flag value not found or the content has already been inserted!    app/views/layouts/application.html.erb
      append    Procfile.dev
  Add bin/dev to start foreman
   identical    bin/dev
         run  bundle install
Bundle complete! 15 Gemfile dependencies, 83 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle lock --add-platform=x86_64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
         run  bundle lock --add-platform=aarch64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
       apply  /Users/by/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/cssbundling-rails-1.3.3/lib/install/tailwind/install.rb
  Install Tailwind (+PostCSS w/ autoprefixer)
      create    tailwind.config.js
      create    app/assets/stylesheets/application.tailwind.css
         run    bun add tailwindcss@latest postcss@latest autoprefixer@latest from "."
bun add v1.0.4 (745b6b94)

 installed tailwindcss@3.3.3 with binaries:
  - tailwind
  - tailwindcss
 installed postcss@8.4.31
 installed autoprefixer@10.4.16 with binaries:
  - autoprefixer


 90 packages installed [1409.00ms]
  Add build:css script
         run    bun run build:css from "."
$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify

Rebuilding...

Done in 109ms.
         run  bundle install
Bundle complete! 15 Gemfile dependencies, 83 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle lock --add-platform=x86_64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock
         run  bundle lock --add-platform=aarch64-linux
Writing lockfile to /Users/by/w/zot/Gemfile.lock

I think this is what's going on: I have npm and bun installed, but not yarn:

zot on  main [?] via ⬢ v18.15.0 via 🍞 v1.0.4 via 💎 v3.2.2 
➜ which npm
/Users/by/.nvm/versions/node/v18.15.0/bin/npm

zot on  main [?] via ⬢ v18.15.0 via 🍞 v1.0.4 via 💎 v3.2.2 
➜ which bun
/opt/homebrew/bin/bun

zot on  main [?] via ⬢ v18.15.0 via 🍞 v1.0.4 via 💎 v3.2.2 
➜ which yarn
yarn not found

It looks like we use yarn to add turbo, here:

         run    yarn add @hotwired/turbo-rails from "."

Looking at package.json, it doesn't have the (yarn) added packages:

{
  "name": "app",
  "private": "true",
  "scripts": {
    "build": "bun bun.config.js",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  },
  "dependencies": {
    "autoprefixer": "latest",
    "postcss": "latest",
    "tailwindcss": "latest"
  }
}

Here's the Procfile.dev:

web: env RUBY_DEBUG_OPEN=true bin/rails server
js: bun run build --watch
css: bun run build:css --watch

Is there a way to use only bun in rails new if bun is enabled? e.g. if bun, then do "bun a @hotwired/turbo-rails" instead of yarn

@rails-bot rails-bot bot removed the more-information-needed When reporter needs to provide more information label Oct 7, 2023
@paulreece
Copy link
Contributor

Okay, I went down a rabbit hole here and it looks like turbo-rails is not installing lib/install/turbo_with_bun.rb which would install turbo with bun:

if (js_entrypoint_path = Rails.root.join("app/javascript/application.js")).exist?
  say "Import Turbo"
  append_to_file "app/javascript/application.js", %(import "@hotwired/turbo-rails"\n)
else
  say "You must import @hotwired/turbo-rails in your JavaScript entrypoint file", :red
end

say "Install Turbo"
run "bun add @hotwired/turbo-rails"

Rails is still recognizing you chose bun here:

Writing lockfile to /Users/by/w/zot/Gemfile.lock
         run  bundle binstubs bundler
       rails  javascript:install:bun

After I temporarily uninstalled yarn I ran into the same issues as you. I think this is a bug, but with turbo-rails so maybe it should get filed over there?

You can see here we only get two of the install files and not the bun one:

turbo-rails-1.4.0/lib/install via 💎 v3.2.2
❯ ls
turbo_needs_redis.rb	turbo_with_importmap.rb	turbo_with_node.rb
(base)

@afcapel @kevinmcconnell any idea why the gem is installing without turbo_with_bun.rb?

@terracatta
Copy link
Contributor

terracatta commented Oct 7, 2023

@paulreece this is happening because someone on the Hotwire team still needs to cut a release of hotwire-rails and stimulus-rails that contains the bun code.

@paulreece
Copy link
Contributor

@terracatta Thanks for clarifying!

@paulreece
Copy link
Contributor

paulreece commented Oct 7, 2023

@whyczz See the release notes here - It was released in March and @terracatta added the bun file a few weeks ago.

@whyczz
Copy link
Author

whyczz commented Oct 8, 2023

Makes sense, I'll close this.
The fix right now (if you don't have yarn) is to add hotwire packages yourself.

@whyczz whyczz closed this as completed Oct 8, 2023
@paulreece
Copy link
Contributor

@whyczz Let's actually leave this open so that the maintainers are aware, and so that other folks who are having the issue won't raise duplicates.

@paulreece paulreece reopened this Oct 8, 2023
@hahmed
Copy link
Contributor

hahmed commented Oct 8, 2023

I think this issue has cropped up a couple of times (#48076), a requirement of css bundling is that you have yarn installed https://github.com/rails/cssbundling-rails#installation

IIRC you could prob do everything with npm these days? Potentially that yarn dependency could get removed from cssbundling? 🤔

@paulreece
Copy link
Contributor

paulreece commented Oct 8, 2023

Yes and to be clear the main issue here is if the user wants to use bun both as a runtime and a package manager.

The issue will effectively be solved as soon as the new hotwire-rails and stimulus-rails versions are released.

@paulreece
Copy link
Contributor

Closing as suggested by @zzak. Current workaround noted above.

@afcapel
Copy link
Contributor

afcapel commented Oct 11, 2023

I've just published new versions of turbo-rails and stimulus-rails so new apps should be ok from now on.

@sedubois
Copy link
Contributor

So are node and yarn still required for cssbundling-rails? Its README still states:

You must already have node and yarn installed on your system.

@paulreece
Copy link
Contributor

I've just published new versions of turbo-rails and stimulus-rails so new apps should be ok from now on.

That's exciting!!

@paulreece
Copy link
Contributor

paulreece commented Oct 12, 2023

So are node and yarn still required for cssbundling-rails? Its README still states:

@sedubois Currently you'll still need yarn.

I tested this a few times locally and it tries to use yarn every time:

 Add build:css script
  Add build:css script
         run    npm pkg set scripts.build:css="tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify" from "."
         run    yarn build:css from "."
Usage Error: The nearest package directory (/Users/ruby_test/test_seven) doesn't seem to be part of the project declared in /Users/.

I think it is possibly because the conditional here is explicitly checking for the bun.lockb file but it doesn't seem to be getting created in the JS step so it returns false every time and defaults to yarn:

  def using_bun?
    File.exist?('bun.lockb') || (tool_exists?('bun') && !File.exist?('yarn.lock'))
  end
 rails c
irb(main):001> File.exist?('bun.lockb')
=> false
 ls
Dockerfile		README.md		bun.config.js		lib			storage			vendor
Gemfile			Rakefile		config			log			tailwind.config.js
Gemfile.lock		app			config.ru		package.json		test
Procfile.dev		bin			db			public			tmp

@fguillen
Copy link

fguillen commented Apr 1, 2024

I had a similar problem but with yarn. Using this command to create a project:

rails new MyProject2 -a propshaft -j esbuild --database postgresql --skip-test --css tailwind

Was giving me errors:

[ERROR] Could not resolve "@hotwired/turbo-rails"

In my case was a weird issue with the installation of yarn because the creation and bin/dev of a Rails project was working in some dirs but not in others.

I found a file in the root of one of my folders called: .pnp.cjs. I deleted it and not it works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants