rails / importmap-rails

Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.
MIT License
1.04k stars 114 forks source link

New Rails 7 project didn't configure import-maps out of the box #140

Closed GuiHeurich closed 2 years ago

GuiHeurich commented 2 years ago

Hi there,

I've recently started a new project with Rails 7, but couldn't use ActionText properlyit (i.e. the rich_text_area box wouldn't render). The issue, I think, was that import-maps wasn't properly configured. After manually installing import-maps, reinstalling action-text and pre-compiling the assets, it worked.

My initial commit.

You can see in the initial commit that import-maps is in Gemfile.lock, but there is nothing inside bin and no 'config/importmap.rb` file. From the documentation, I assumed these to have been configured when creating a new project.

Did I miss a step somewhere?

Thanks for all your hard work.

dhh commented 2 years ago

Can't replicate this. If you find a way to do so, please reopen with reproduction steps.

adammiribyan commented 2 years ago

Generating a new Rails app with --javascript=importmap still installs esbuild.

~/projects ยป ruby -v
ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [arm64-darwin21]
~/projects ยป rails new testapp --database=postgresql --css=postcss --asset-pipeline=propshaft --javascript=importmap --main
      create  
      create  Gemfile
         run  bundle install
Fetching https://github.com/rails/rails.git
Fetching gem metadata from https://rubygems.org/.......
Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/..........
Resolving dependencies...
Using rake 13.0.6
Using concurrent-ruby 1.1.10
Using connection_pool 2.2.5
Using minitest 5.16.3
Using builder 3.2.4
Using erubi 1.11.0
Using mini_portile2 2.8.0
Using racc 1.6.0
Using crass 1.0.6
Using rack 2.2.4
Using nio4r 2.5.8
Using websocket-extensions 0.1.5
Using zeitwerk 2.6.0
Using marcel 1.0.2
Using mini_mime 1.1.2
Using digest 3.1.0
Using timeout 0.3.0
Using strscan 3.0.4
Using bundler 2.2.3
Using method_source 1.0.0
Using thor 1.2.1
Using i18n 1.12.0
Using tzinfo 2.0.5
Using nokogiri 1.13.8 (arm64-darwin)
Using rack-test 2.0.2
Using websocket-driver 0.7.5
Using mail 2.7.1
Using net-protocol 0.1.3
Using activesupport 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using loofah 2.18.0
Using net-imap 0.2.3
Using net-pop 0.1.1
Using net-smtp 0.3.1
Using rails-html-sanitizer 1.4.3
Using rails-dom-testing 2.0.3
Using globalid 1.0.0
Using activemodel 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actionview 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using activejob 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using activerecord 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actionpack 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actioncable 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using activestorage 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actionmailer 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using railties 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actionmailbox 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actiontext 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using rails 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Bundle complete! 1 Gemfile dependency, 48 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle exec rails new /Users/adam/projects/testapp --database\=postgresql --css\=postcss --asset-pipeline\=propshaft --javascript\=importmap --main
       exist  
      remove  Gemfile
      remove  Gemfile.lock
      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/adam/projects/testapp/.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_1.rb
      create  config/initializers/permissions_policy.rb
      create  config/locales
      create  config/locales/en.yml
      create  config/master.key
      append  .gitignore
Adding config/credentials.yml.enc to store encrypted credentials.

The following content has been encrypted with the Rails master key:

# aws:
#   access_key_id: 123
#   secret_access_key: 345

# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: d5ef851b824f69f7815779b88eda65345541e2efb76addfbea165172819a5a4858100a6b445cfba37399c3566e944296585af5f891a432512b44364b82e6d4e7

You can edit encrypted credentials with `bin/rails credentials:edit`.

       rails  credentials:diff --enroll
Enrolled project in credentials file diffing!
Rails ensures the rails_credentials diff driver is set when running `bin/rails credentials:edit`. See `bin/rails credentials:help` for more.
      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  app/assets/config/manifest.js
      remove  app/assets/config
      remove  app/assets/stylesheets/application.css
      create  app/assets/stylesheets/application.css
      remove  config/initializers/cors.rb
      remove  config/initializers/new_framework_defaults_7_1.rb
         run  bundle install
Fetching https://github.com/rails/rails.git
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 13.0.6
Using concurrent-ruby 1.1.10
Using connection_pool 2.2.5
Using minitest 5.16.3
Using builder 3.2.4
Using erubi 1.11.0
Using mini_portile2 2.8.0
Using racc 1.6.0
Using crass 1.0.6
Using rack 2.2.4
Using nio4r 2.5.8
Using websocket-extensions 0.1.5
Using zeitwerk 2.6.0
Using marcel 1.0.2
Using mini_mime 1.1.2
Using digest 3.1.0
Using timeout 0.3.0
Using strscan 3.0.4
Using public_suffix 5.0.0
Using bindex 0.8.1
Using msgpack 1.5.6
Using bundler 2.2.3
Using matrix 0.4.2
Using regexp_parser 2.5.0
Using childprocess 4.1.0
Using method_source 1.0.0
Using thor 1.2.1
Using io-console 0.5.11
Using pg 1.4.3
Using rexml 3.2.5
Using rubyzip 2.3.2
Using websocket 1.2.9
Using i18n 1.12.0
Using tzinfo 2.0.5
Using nokogiri 1.13.8 (arm64-darwin)
Using rack-test 2.0.2
Using websocket-driver 0.7.5
Using mail 2.7.1
Using net-protocol 0.1.3
Using addressable 2.8.1
Using bootsnap 1.13.0
Using reline 0.3.1
Using puma 5.6.5
Using selenium-webdriver 4.4.0
Using activesupport 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using loofah 2.18.0
Using net-imap 0.2.3
Using net-pop 0.1.1
Using rails-html-sanitizer 1.4.3
Using net-smtp 0.3.1
Using xpath 3.2.0
Using webdrivers 5.0.0
Using irb 1.4.1
Using rails-dom-testing 2.0.3
Using globalid 1.0.0
Using activemodel 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using capybara 3.37.1
Using actionview 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using activejob 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using activerecord 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using debug 1.6.2
Using actionpack 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using jbuilder 2.11.5
Using actioncable 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using activestorage 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actionmailer 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using railties 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actionmailbox 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actiontext 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using cssbundling-rails 1.1.1
Using jsbundling-rails 1.0.3
Using propshaft 0.6.4
Using rails 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using stimulus-rails 1.1.0
Using turbo-rails 1.1.1
Using web-console 4.2.0
Bundle complete! 16 Gemfile dependencies, 76 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  .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
Parsing documentation for foreman-0.87.2
Done installing documentation for foreman after 0 seconds
1 gem installed
Add bin/dev to start foreman
      create  bin/dev
Install esbuild
         run  yarn add esbuild from "."
yarn add v1.22.19
info No lockfile found.
[1/4] ๐Ÿ”  Resolving packages...
[2/4] ๐Ÿšš  Fetching packages...
[3/4] ๐Ÿ”—  Linking dependencies...
[4/4] ๐Ÿ”จ  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
โ””โ”€ esbuild@0.15.5
info All dependencies
โ”œโ”€ esbuild-darwin-arm64@0.15.5
โ””โ”€ esbuild@0.15.5
โœจ  Done in 1.23s.
Add build script
         run  npm set-script build "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets" from "."
npm WARN set-script set-script is deprecated, use `npm pkg set scripts.scriptname="cmd" instead.
         run  yarn build from "."
yarn run v1.22.19
$ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets

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

โœจ  Done in 0.18s.
       rails  turbo:install stimulus:install
Import Turbo
      append  app/javascript/application.js
Install Turbo
         run  yarn add @hotwired/turbo-rails from "."
yarn add v1.22.19
[1/4] ๐Ÿ”  Resolving packages...
[2/4] ๐Ÿšš  Fetching packages...
[3/4] ๐Ÿ”—  Linking dependencies...
[4/4] ๐Ÿ”จ  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
โ””โ”€ @hotwired/turbo-rails@7.1.3
info All dependencies
โ”œโ”€ @hotwired/turbo-rails@7.1.3
โ”œโ”€ @hotwired/turbo@7.1.0
โ””โ”€ @rails/actioncable@7.0.3
โœจ  Done in 1.75s.
Enable redis in bundle
        gsub  Gemfile
         run  bundle install
Fetching gem metadata from https://rubygems.org/...........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 13.0.6
Using concurrent-ruby 1.1.10
Using connection_pool 2.2.5
Using minitest 5.16.3
Using builder 3.2.4
Using erubi 1.11.0
Using mini_portile2 2.8.0
Using racc 1.6.0
Using crass 1.0.6
Using rack 2.2.4
Using nio4r 2.5.8
Using websocket-extensions 0.1.5
Using zeitwerk 2.6.0
Using marcel 1.0.2
Using mini_mime 1.1.2
Using digest 3.1.0
Using timeout 0.3.0
Using strscan 3.0.4
Using public_suffix 5.0.0
Using bindex 0.8.1
Using msgpack 1.5.6
Using bundler 2.2.3
Using matrix 0.4.2
Using regexp_parser 2.5.0
Using childprocess 4.1.0
Using method_source 1.0.0
Using thor 1.2.1
Using io-console 0.5.11
Using pg 1.4.3
Using redis 4.8.0
Using rexml 3.2.5
Using rubyzip 2.3.2
Using websocket 1.2.9
Using i18n 1.12.0
Using tzinfo 2.0.5
Using nokogiri 1.13.8 (arm64-darwin)
Using rack-test 2.0.2
Using websocket-driver 0.7.5
Using mail 2.7.1
Using net-protocol 0.1.3
Using addressable 2.8.1
Using bootsnap 1.13.0
Using reline 0.3.1
Using puma 5.6.5
Using selenium-webdriver 4.4.0
Using activesupport 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using loofah 2.18.0
Using net-imap 0.2.3
Using net-pop 0.1.1
Using net-smtp 0.3.1
Using xpath 3.2.0
Using irb 1.4.1
Using webdrivers 5.0.0
Using rails-dom-testing 2.0.3
Using rails-html-sanitizer 1.4.3
Using globalid 1.0.0
Using activemodel 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using capybara 3.37.1
Using debug 1.6.2
Using actionview 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using activejob 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using activerecord 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actionpack 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using jbuilder 2.11.5
Using actioncable 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using activestorage 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actionmailer 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using railties 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actionmailbox 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using actiontext 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using jsbundling-rails 1.0.3
Using cssbundling-rails 1.1.1
Using propshaft 0.6.4
Using rails 7.1.0.alpha from https://github.com/rails/rails.git (at main@342bd85)
Using stimulus-rails 1.1.0
Using turbo-rails 1.1.1
Using web-console 4.2.0
Bundle complete! 17 Gemfile dependencies, 77 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Switch development cable to use redis
        gsub  config/cable.yml
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 "."
yarn add v1.22.19
[1/4] ๐Ÿ”  Resolving packages...
[2/4] ๐Ÿšš  Fetching packages...
[3/4] ๐Ÿ”—  Linking dependencies...
[4/4] ๐Ÿ”จ  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
โ””โ”€ @hotwired/stimulus@3.1.0
info All dependencies
โ””โ”€ @hotwired/stimulus@3.1.0
โœจ  Done in 0.79s.
       rails  css:install:postcss
Build into app/assets/builds
       exist  app/assets/builds
   identical  app/assets/builds/.keep
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 PostCSS w/ nesting and autoprefixer
      create  postcss.config.js
      create  app/assets/stylesheets/application.postcss.css
         run  yarn add postcss postcss-cli postcss-nesting autoprefixer from "."
yarn add v1.22.19
[1/4] ๐Ÿ”  Resolving packages...
[2/4] ๐Ÿšš  Fetching packages...
[3/4] ๐Ÿ”—  Linking dependencies...
[4/4] ๐Ÿ”จ  Building fresh packages...
success Saved lockfile.
success Saved 74 new dependencies.
info Direct dependencies
โ”œโ”€ autoprefixer@10.4.8
โ”œโ”€ postcss-cli@10.0.0
โ”œโ”€ postcss-nesting@10.1.10
โ””โ”€ postcss@8.4.16
info All dependencies
โ”œโ”€ @csstools/selector-specificity@2.0.2
โ”œโ”€ @nodelib/fs.scandir@2.1.5
โ”œโ”€ @nodelib/fs.stat@2.0.5
โ”œโ”€ @nodelib/fs.walk@1.2.8
โ”œโ”€ ansi-regex@5.0.1
โ”œโ”€ ansi-styles@4.3.0
โ”œโ”€ anymatch@3.1.2
โ”œโ”€ autoprefixer@10.4.8
โ”œโ”€ binary-extensions@2.2.0
โ”œโ”€ braces@3.0.2
โ”œโ”€ browserslist@4.21.3
โ”œโ”€ caniuse-lite@1.0.30001382
โ”œโ”€ chokidar@3.5.3
โ”œโ”€ cliui@7.0.4
โ”œโ”€ color-convert@2.0.1
โ”œโ”€ color-name@1.1.4
โ”œโ”€ cssesc@3.0.0
โ”œโ”€ dependency-graph@0.11.0
โ”œโ”€ dir-glob@3.0.1
โ”œโ”€ electron-to-chromium@1.4.226
โ”œโ”€ emoji-regex@8.0.0
โ”œโ”€ fast-glob@3.2.11
โ”œโ”€ fastq@1.13.0
โ”œโ”€ fill-range@7.0.1
โ”œโ”€ fraction.js@4.2.0
โ”œโ”€ fs-extra@10.1.0
โ”œโ”€ fsevents@2.3.2
โ”œโ”€ get-caller-file@2.0.5
โ”œโ”€ get-stdin@9.0.0
โ”œโ”€ glob-parent@5.1.2
โ”œโ”€ globby@13.1.2
โ”œโ”€ graceful-fs@4.2.10
โ”œโ”€ ignore@5.2.0
โ”œโ”€ is-binary-path@2.1.0
โ”œโ”€ is-extglob@2.1.1
โ”œโ”€ is-fullwidth-code-point@3.0.0
โ”œโ”€ is-glob@4.0.3
โ”œโ”€ is-number@7.0.0
โ”œโ”€ jsonfile@6.1.0
โ”œโ”€ lilconfig@2.0.6
โ”œโ”€ merge2@1.4.1
โ”œโ”€ micromatch@4.0.5
โ”œโ”€ nanoid@3.3.4
โ”œโ”€ node-releases@2.0.6
โ”œโ”€ normalize-path@3.0.0
โ”œโ”€ normalize-range@0.1.2
โ”œโ”€ path-type@4.0.0
โ”œโ”€ picomatch@2.3.1
โ”œโ”€ pify@2.3.0
โ”œโ”€ postcss-cli@10.0.0
โ”œโ”€ postcss-load-config@4.0.1
โ”œโ”€ postcss-nesting@10.1.10
โ”œโ”€ postcss-reporter@7.0.5
โ”œโ”€ postcss-selector-parser@6.0.10
โ”œโ”€ postcss-value-parser@4.2.0
โ”œโ”€ postcss@8.4.16
โ”œโ”€ pretty-hrtime@1.0.3
โ”œโ”€ queue-microtask@1.2.3
โ”œโ”€ read-cache@1.0.0
โ”œโ”€ readdirp@3.6.0
โ”œโ”€ require-directory@2.1.1
โ”œโ”€ reusify@1.0.4
โ”œโ”€ run-parallel@1.2.0
โ”œโ”€ source-map-js@1.0.2
โ”œโ”€ string-width@4.2.3
โ”œโ”€ thenby@1.3.4
โ”œโ”€ to-regex-range@5.0.1
โ”œโ”€ update-browserslist-db@1.0.5
โ”œโ”€ util-deprecate@1.0.2
โ”œโ”€ wrap-ansi@7.0.0
โ”œโ”€ y18n@5.0.8
โ”œโ”€ yaml@2.1.1
โ”œโ”€ yargs-parser@21.1.1
โ””โ”€ yargs@17.5.1
โœจ  Done in 2.33s.
Add build:css script
         run  npm set-script build:css "postcss ./app/assets/stylesheets/application.postcss.css -o ./app/assets/builds/application.css" from "."
npm WARN set-script set-script is deprecated, use `npm pkg set scripts.scriptname="cmd" instead.
         run  yarn build:css from "."
yarn run v1.22.19
$ postcss ./app/assets/stylesheets/application.postcss.css -o ./app/assets/builds/application.css
โœจ  Done in 0.46s.
stefanahman commented 2 years ago

I am experiencing the same problem, I'm also getting esbuild