- Install jsbundling-rails
- Swap pack_tag for include_tag
- Import stimulus controllers
- Migrate JS entrypoint
- Remove webpack
- Github Actions
1. Install jsbundling-rails
Add to gemfile:
In the terminal, run:
2. Swap pack_tag for include_tag
The jsbundling:install command inserts a
Remove webpack's legacy
If your app render multiple layouts, be sure to remove any
3. Import stimulus controllers
Even when you already installed stimulus, run the install command again in your terminal and overwrite any confliction changes. This will import all your existing stimulus controller correctly.
Now, after adding or removing a new stimulus controller you can use a command which will auto-generate the
4. Migrate JS entrypoint
Move the content from
// old require("channels") //new import "./channels" import "./controllers"
5. Remove webpack
Webpack and its tentacles can finally be removed from the application.
A. Remove webpacker gem
gem 'webpacker', '~> 5.4'
B. Remove webpack packages
Webpack packages and plugins that accumulated over time can be removed too. For me, this included:
C. Remove webpack files
Finally, remove all config and start-up files:
- config/webpack (directory)
6. Github Actions
If you use Github Actions as a CI/CD make sure to add in an additional build step to run yarn build. Yarn build will trigger the build step defined in your
- name: Build Esbuild run: yarn build
UPDATE this is step is redundant now as mentioned by @jrochkind in the comments. See https://devcenter.heroku.com/changelog-items/2284.
If you use heroku to deploy your application, Heroku will NOT automatically install yarn as it does for Webpack!**
Therefore, we need to explicitly set a node buildpack before ruby. You can do this in the terminal or the Heroku Dashboard.
heroku buildpacks:clear heroku buildpacks:set heroku/nodejs heroku buildpacks:add heroku/ruby
- ** Thanks to Rob for blogging about the yarn missing step
- How to use ESBuild with JS Bundling in Rails
Latest comments (4)
Hi! After migrating my project from webpacker to jsbundling through esbuild I keep getting this error on my console : Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "turbo-frame" has already been used with this registry... I believe Turbo is loading twice. Any clues on how to fix this?
Ignore this comment: I'm trying to understand when/if it updates package.json
Heroku seems to have solved this problem, no longer necessary or recommended to add the nodejs buildpack. devcenter.heroku.com/changelog-ite...
Great, thanks for informing. I'll update it in the article.