Migrating a Rails App with VueJS, Stimulus, and jQuery from Webpacker to Importmaps

When using Importmaps you’re essentially telling Rails to load JavaScript modules directly from the browser without a compilation step. This works well for libraries that don’t require preprocessing, like Stimulus controllers or plain jQuery code. However, your VueJS 2.6 components require processing (e.g., to handle single file components via VueLoaderPlugin) which goes beyond what Importmaps can offer.

Recommended Approach

For your mixed-codebase, the simplest solution is to continue using Importmaps for parts that don’t need bundling (like legacy jQuery or plain Stimulus), and add a JavaScript bundler for your VueJS application. In practice, you may choose one of the following:

• jsbundling-rails: This gem integrates bundlers (like esbuild, Rollup, or Webpack) with Rails, allowing you to process Vue files properly with VueLoaderPlugin.
• Vite.js: An alternative modern build tool that can be integrated with Rails (via community gems) to handle fast rebuilds and efficient bundling.

Since your VueJS part relies on a bundler to manage its specific build requirements, it is necessary to add a packaging toolchain for that section of your app.

Example with jsbundling-rails

1. Add the gem (if not already added):

   RUBYCopied
   # Gemfile
   gem "jsbundling-rails"

2. Install your preferred bundler (for example, esbuild):

   SHELLCopied
   $ rails javascript:install:esbuild

3. Configure your VueJS build by modifying the bundler configuration (for instance, adding VueLoaderPlugin in your webpack or esbuild config) so that Vue components are processed correctly.

Summary

• Importmaps: Great for loading libraries or modules that don’t need transpiling or a build step (Stimulus, jQuery, etc.).
• Bundling (via jsbundling-rails or Vite.js): Necessary for the VueJS part since it requires processing with VueLoaderPlugin.

This dual approach lets you migrate away from Webpacker while using the simplest setup for each part of your application's JavaScript.