Rails 7.0.0alpha2, esbuild, tailwind and devise

collinjilbert

Collin

Posted on September 18, 2021

Rails 7.0.0alpha2, esbuild, tailwind and devise

I recently took a go at starting a new Rails application with Rails 7.0.0alpha2. It went pretty well aside from a few things which I'm going to share with you and point you towards the solutions I came across.

The first step was to get the new version of Rails. You can head on over to https://rubygems.org/gems/rails/versions/7.0.0.alpha2
and grab the install command to get Rails 7 installed.

Next I started a new rails app based off of this video that DHH put out:
https://www.youtube.com/watch?v=JsNtLiph87Y

I ran the same commands but did not get the same results. The main issue was that the build script commands needed for esbuild and tailwind did not get added to the package.json file. A friend pointed out to me, when I shared this on Twitter, what was most likely the cause (the npm version I was using) which you can find in the comments along with the scripts that I had to add before I learned of the possible cause (Thanks again so much Andrea!):

https://twitter.com/collin_jilbert/status/1439316892351705096

With these issues resolved I was off to the races with tailwindcss running in JIT mode as well! Really cool and despite the issues I had, it was still the easiest time I've had installing tailwind in a rails app not to mention getting JIT to work. I basically did nothing :)

Next was an issue when pulling in Devise. Here's the issues you might run into as well if you're following along:

If you run into an issue when running rails generate devise:install, there's a solution branch you can use listed in the thread linked below:

https://github.com/heartcombo/devise/pull/5357#pullrequestreview-656251176

You'll want to add this to your gemfile to use this branch:

gem "devise", github: "ghiculescu/devise", branch: "patch-2"
Enter fullscreen mode Exit fullscreen mode

Run bundle again and then you can move on.

Next you'll probably run into:

Error in lib/devise.rb:316:in get: undefined method constantize for ActiveSupport::Dependencies:Module (NoMethodError)
Enter fullscreen mode Exit fullscreen mode

as noted here, which also provides some guidance on a fix:
https://github.lancex.top/heartcombo/devise#issue-975972076

I ran

bundle open devise
Enter fullscreen mode Exit fullscreen mode

and then made this change to this method which starts on line 315 in devise/lib/devise.rb:
Change from:

def get
  ActiveSupport::Dependencies.constantize(@name)
end
Enter fullscreen mode Exit fullscreen mode

To:

def get
  @name.constantize
end
Enter fullscreen mode Exit fullscreen mode

The next speed bump was an issue I found that was unexpected related to stimulus. After creating a new stimulus controller I noticed, after trying to do a simple console.log in the controller connect() method, that it wasn't firing. After further investigation I found that, with this setup at least, that you can't just manually create a new controller and expect it to work. Instead, if you manually create a new stimulus controller, afterward you need to also remember to run

stimulus:manifest:update
Enter fullscreen mode Exit fullscreen mode

or use the generator to create the controller like so:

./bin/rails generate stimulus [controller]
Enter fullscreen mode Exit fullscreen mode

This may already be known to you but it was new to me as the app I work on at my day job uses webpack and seems to automatically pickup any new stimulus controllers. I'm still learning the in's and out's of the setup at work so be gentle on me in regard to any comments about the previous statement. :)

Hope this helps get you up and running with Rails 7 and the other tools mentioned quickly and enjoying the experience! As time goes on I'm sure a lot of these issues will get worked out thanks to the work by the great folks of the open source community. To all of those folks I send you my warmest thank you!

💖 💪 🙅 🚩
collinjilbert
Collin

Posted on September 18, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related