rails new app_name --css bootstrap imports error on page load in Firefox and Chromium on Ubuntu (rails 7.0.0.alpha2)

[sebastianiorga]

To reproduce

rails new alpha_test_css --css bootstrap
cd alpha_test_css
rails g migration Message body:text
rake db:migrate
bin/dev

Open localhost:3000/messages in Firefox(92.0 (64-bit)) and I get

in Chromium (Version 93.0.4577.82 (Official Build) snap (64-bit)) I get

Same situation in an existing app where I add bootstrap following the steps in the Readme.

Gemfile.lock

GEM
  remote: https://rubygems.org/
  specs:
    actioncable (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
    actionmailbox (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      activejob (= 7.0.0.alpha2)
      activerecord (= 7.0.0.alpha2)
      activestorage (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      mail (>= 2.7.1)
    actionmailer (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      actionview (= 7.0.0.alpha2)
      activejob (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      mail (~> 2.5, >= 2.5.4)
      rails-dom-testing (~> 2.0)
    actionpack (7.0.0.alpha2)
      actionview (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      rack (~> 2.0, >= 2.2.0)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.2.0)
    actiontext (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      activerecord (= 7.0.0.alpha2)
      activestorage (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      nokogiri (>= 1.8.5)
    actionview (7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.1, >= 1.2.0)
    activejob (7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      globalid (>= 0.3.6)
    activemodel (7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
    activerecord (7.0.0.alpha2)
      activemodel (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
    activestorage (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      activejob (= 7.0.0.alpha2)
      activerecord (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      marcel (~> 1.0.0)
      mini_mime (>= 1.1.0)
    activesupport (7.0.0.alpha2)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
      tzinfo (~> 2.0)
    addressable (2.8.0)
      public_suffix (>= 2.0.2, < 5.0)
    bindex (0.8.1)
    bootsnap (1.9.0)
      msgpack (~> 1.0)
    builder (3.2.4)
    capybara (3.35.3)
      addressable
      mini_mime (>= 0.1.3)
      nokogiri (~> 1.8)
      rack (>= 1.6.0)
      rack-test (>= 0.6.3)
      regexp_parser (>= 1.5, < 3.0)
      xpath (~> 3.2)
    childprocess (3.0.0)
    concurrent-ruby (1.1.9)
    crass (1.0.6)
    cssbundling-rails (0.1.7)
      railties (>= 6.0.0)
      sprockets-rails (>= 2.0.0)
    debug (1.1.0)
      irb
      reline (>= 0.2.7)
    erubi (1.10.0)
    ffi (1.15.4)
    globalid (0.5.2)
      activesupport (>= 5.0)
    i18n (1.8.10)
      concurrent-ruby (~> 1.0)
    importmap-rails (0.6.1)
      rails (>= 6.0.0)
    io-console (0.5.9)
    irb (1.3.7)
      reline (>= 0.2.7)
    jbuilder (2.11.2)
      activesupport (>= 5.0.0)
    loofah (2.12.0)
      crass (~> 1.0.2)
      nokogiri (>= 1.5.9)
    mail (2.7.1)
      mini_mime (>= 0.1.1)
    marcel (1.0.1)
    method_source (1.0.0)
    mini_mime (1.1.1)
    minitest (5.14.4)
    msgpack (1.4.2)
    nio4r (2.5.8)
    nokogiri (1.12.4-x86_64-linux)
      racc (~> 1.4)
    public_suffix (4.0.6)
    puma (5.4.0)
      nio4r (~> 2.0)
    racc (1.5.2)
    rack (2.2.3)
    rack-test (1.1.0)
      rack (>= 1.0, < 3)
    rails (7.0.0.alpha2)
      actioncable (= 7.0.0.alpha2)
      actionmailbox (= 7.0.0.alpha2)
      actionmailer (= 7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      actiontext (= 7.0.0.alpha2)
      actionview (= 7.0.0.alpha2)
      activejob (= 7.0.0.alpha2)
      activemodel (= 7.0.0.alpha2)
      activerecord (= 7.0.0.alpha2)
      activestorage (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      bundler (>= 1.15.0)
      railties (= 7.0.0.alpha2)
      sprockets-rails (>= 2.0.0)
    rails-dom-testing (2.0.3)
      activesupport (>= 4.2.0)
      nokogiri (>= 1.6)
    rails-html-sanitizer (1.4.2)
      loofah (~> 2.3)
    railties (7.0.0.alpha2)
      actionpack (= 7.0.0.alpha2)
      activesupport (= 7.0.0.alpha2)
      method_source
      rake (>= 0.13)
      thor (~> 1.0)
      zeitwerk (~> 2.5.0.beta3)
    rake (13.0.6)
    redis (4.4.0)
    regexp_parser (2.1.1)
    reline (0.2.7)
      io-console (~> 0.5)
    rubyzip (2.3.2)
    sassc (2.4.0)
      ffi (~> 1.9)
    sassc-rails (2.1.2)
      railties (>= 4.0.0)
      sassc (>= 2.0)
      sprockets (> 3.0)
      sprockets-rails
      tilt
    selenium-webdriver (3.142.7)
      childprocess (>= 0.5, < 4.0)
      rubyzip (>= 1.2.2)
    sprockets (4.0.2)
      concurrent-ruby (~> 1.0)
      rack (> 1, < 3)
    sprockets-rails (3.2.2)
      actionpack (>= 4.0)
      activesupport (>= 4.0)
      sprockets (>= 3.0.0)
    sqlite3 (1.4.2)
    stimulus-rails (0.5.3)
      rails (>= 6.0.0)
    thor (1.1.0)
    tilt (2.0.10)
    turbo-rails (0.7.14)
      rails (>= 6.0.0)
    tzinfo (2.0.4)
      concurrent-ruby (~> 1.0)
    web-console (4.1.0)
      actionview (>= 6.0.0)
      activemodel (>= 6.0.0)
      bindex (>= 0.4.0)
      railties (>= 6.0.0)
    webdrivers (4.6.1)
      nokogiri (~> 1.6)
      rubyzip (>= 1.3.0)
      selenium-webdriver (>= 3.0, < 4.0)
    websocket-driver (0.7.5)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
    xpath (3.2.0)
      nokogiri (~> 1.8)
    zeitwerk (2.5.0.beta3)

PLATFORMS
  x86_64-linux

DEPENDENCIES
  bootsnap (>= 1.4.4)
  capybara (>= 3.26)
  cssbundling-rails
  debug (>= 1.0.0)
  importmap-rails (>= 0.3.4)
  jbuilder (~> 2.7)
  puma (~> 5.0)
  rails (~> 7.0.0.alpha2)
  redis (~> 4.0)
  sassc-rails (~> 2.1)
  selenium-webdriver
  sqlite3 (~> 1.4)
  stimulus-rails (>= 0.4.0)
  turbo-rails (>= 0.7.11)
  tzinfo-data
  web-console (>= 4.1.0)
  webdrivers

RUBY VERSION
   ruby 3.0.0p0

BUNDLED WITH
   2.2.3

[dhh]

Ah yes. Problem is that we assume we're running in a jsbundling app, but don't actually enforce that. Need to enforce adding a jsbundler when using this. Doesn't work with import maps (and doesn't make sense, since you've already added node).

[sebastianiorga]

Right, I was wondering how it would handle the js part of bootstrap. Adding esbuild manually doesn't seem to fix it, since esbuild just errors. On the same app as above I do the jsbundling install steps

./bin/rails javascript:install:esbuild
yarn build

I get (among the rest of the log)

  | yarn run v1.22.11
17:05:49 css.1  | $ sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch
17:05:49 js.1   | $ esbuild app/javascript/*.* --bundle --outdir=app/assets/builds --watch
17:05:49 js.1   |  > app/javascript/application.js:2:7: error: Could not resolve "@hotwired/turbo-rails" (mark it as external to exclude it from the bundle)
17:05:49 js.1   |     2 │ import "@hotwired/turbo-rails"
17:05:49 js.1   |       ╵        ~~~~~~~~~~~~~~~~~~~~~~~
17:05:49 js.1   | 
17:05:49 js.1   |  > app/javascript/application.js:3:7: error: Could not resolve "controllers" (use "./controllers" to reference the file "app/javascript/controllers/index.js")
17:05:49 js.1   |     3 │ import "controllers"
17:05:49 js.1   |       ╵        ~~~~~~~~~~~~~
17:05:49 js.1   | 
17:05:49 js.1   | 2 errors
17:05:49 js.1   | [watch] build finished, watching for changes...

However a fresh install rails new css_alpha_test --css bootstrap -j esbuild works fine.

OK it all makes more sense now, I think I was just confused. So for pure JS dependencies, we could pull them with importmap from a CDN. If we want to include pure CSS dependencies we'd need to use cssbundling. And if there are mixed css and js dependencies like bootstrap, we need to switch fully from importmap to css/jsbundling?

Also plain fresh rails app just errors in Firefox(I assume this is because a shim is needed?

Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”. messages:28:7
Uncaught SyntaxError: unexpected token: identifier
b9c3fc59-e9b7-4440-9662-af9687afa6ed:1:24
Uncaught SyntaxError: unexpected token: identifier
d0bca922-dba7-4d0b-9c60-802ae8814c2d:1:25

​```

It still errors if I add

<script async src="https://unpkg.com/es-module-shims@0.14.0/dist/es-module-shims.js"></script>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>

Is it worth making obvious sort of issues like this as I test things out for myself next week or are you guys already gonna catch this type of setup stuff? Don't wanna just spam the tracker with trivialities.

[dhh]

Closing via rails/rails#43600

[vknightbd]

I don't have a Firefox issue, but my error output was identical to the one posted by sebastianiorga. I was running into a Bootstrap issue for months and I finally just fixed it just now. (My initial project did not have css set up; nor did my system have yarn installed initially.) I ran bin/setup and it seemed to get me farther, but I was still stuck with that esbuild error.

For posterity, anyone else having this Could not resolve "@hotwired/turbo-rails" and Could not resolve "controllers" error. This is how I fixed it on my system.

Create a fresh install as per sebastianiorga: rails new css_alpha_test --css bootstrap -j esbuild

• Using this fresh install, copy over the package.json, which should cover the missing dependencies @hotwired/turbo-rails
• Also copy over missing node_module/@hotwired and node_module/@rails folders.
• Manually fix app/javascript/application.js and change "controllers" to "./controllers"

I'm guessing when manually installing via bin/rails css:install:bootstrap, the installation forgets to add in the npm turbo-rails dependencies.

[jmvbxx]

Looks like this is still an ongoing issue. Here's my output:

$ yarn add @hotwired/turbo-rails
yarn add v1.22.19
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@hotwired%2fturbo-rails: connect ENETUNREACH 2606:4700::6810:1723:443".

Here is the output in yarn-error.log:

Arguments: 
  /usr/bin/node /usr/bin/yarn add @hotwired/turbo-rails

PATH: 
  /home/jason/.rbenv/plugins/ruby-build/bin:/home/jason/.rbenv/shims:/home/jason/.rbenv/bin:/home/jason/.tfenv/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/snap/bin:/usr/local/go/bin

Yarn version: 
  1.22.19

Node version: 
  18.12.1

Platform: 
  linux x64

Trace: 
  Error: connect ENETUNREACH 2606:4700::6810:1723:443
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16)

npm manifest: 
  {
    "name": "app",
    "private": "true",
    "scripts": {
      "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
    }
  }

yarn manifest: 
  No manifest

Lockfile: 
  # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
  # yarn lockfile v1

Any help is greatly appreciated. Thank you.

[jmvbxx]

I fixed the above with the following:
export NODE_OPTIONS="--dns-result-order=ipv4first"