Using webpacker with a Rails engine

Question

I am following this tutorial for working with webpacker with a Rails engine:

http://ben.vandgrift.com/posts/rails-engine-webpacker-1/

It's based on this:

https://github.com/rails/webpacker/blob/5-x-stable/docs/engines.md

The tutorial and github documentation are very informative but I'm unable to get my host app to include javascript from the engine. I've cloned the repos from the tutorial locally (saddlebag is the repo for the engine, saddlebag-dummy is the host app):

https://github.com/bvandgrift/saddlebag

https://github.com/bvandgrift/saddlebag-dummy

The only modification I've made is to update the mimemagic gem, as the specified version of that gem has been pulled from gem sources.

-    mimemagic (0.3.5)
+    mimemagic (0.3.10)
+      nokogiri (~> 1)
+      rake

when I run rails webpacker:compile in the host app directory it generates the following:

Hash: 10b1522b0b9c4b8aca2d
Version: webpack 4.44.1
Time: 966ms
Built at: 05/03/2021 2:48:22 PM
                                        Asset       Size  Chunks                         Chunk Names
       js/application-cb05ac1ef9258bc6a611.js   52.7 KiB       0  [emitted] [immutable]  application
    js/application-cb05ac1ef9258bc6a611.js.br   11.3 KiB          [emitted]
    js/application-cb05ac1ef9258bc6a611.js.gz   12.8 KiB          [emitted]
   js/application-cb05ac1ef9258bc6a611.js.map    145 KiB       0  [emitted] [dev]        application
js/application-cb05ac1ef9258bc6a611.js.map.br   31.9 KiB          [emitted]
js/application-cb05ac1ef9258bc6a611.js.map.gz   36.7 KiB          [emitted]
                            manifest.json  364 bytes          [emitted]
                         manifest.json.br  127 bytes          [emitted]
                         manifest.json.gz  142 bytes          [emitted]
Entrypoint application = js/application-cb05ac1ef9258bc6a611.js js/application-cb05ac1ef9258bc6a611.js.map
[0] (webpack)/buildin/module.js 552 bytes {0} [built]
[1] ./app/javascript/packs/application.js 682 bytes {0} [built]
    + 2 hidden modules

Here are the contents of the manifest.json file:

{
  "application.js": "/packs/js/application-cb05ac1ef9258bc6a611.js",
  "application.js.map": "/packs/js/application-cb05ac1ef9258bc6a611.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-cb05ac1ef9258bc6a611.js"
      ],
      "js.map": [
        "/packs/js/application-cb05ac1ef9258bc6a611.js.map"
      ]
    }
  }
}

It looks like webpacker is running but not including the javascript from the engine.

Attempting to hit the counter page I get the following:

Webpacker can't find counter.js in > /Users/fredwillmore/OtherDocuments/rails_projects/saddlebag/public/saddlebag-packs/manifest.json. Possible causes:

1. You want to set webpacker.yml value of compile to true for your environment unless you are using the webpack -w or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest. Your manifest contains: { }

Ok, that is correct, my manifest file in the engine is empty. So I think I need to compile/webpack/process the javascript in the engine. Now attempting to compile the engine code. The engine has a rake task saddlebag:webpacker:compile defined in lib/tasks/saddlebag_tasks.rake, but I'm not able to run it:

❯❯❯ rake saddlebag:webpacker:compile
rake aborted!
Don't know how to build task 'saddlebag:webpacker:compile' (See the list of available tasks with `rake --tasks`)

The rake task doesn't appear at all in rake --tasks:

❯❯❯ rake --tasks
rake build            # Build saddlebag-0.1.0.gem into the pkg directory
rake clean            # Remove any temporary products
rake clobber          # Remove any generated files
rake clobber_rdoc     # Remove RDoc HTML files
rake install          # Build and install saddlebag-0.1.0.gem into system gems
rake install:local    # Build and install saddlebag-0.1.0.gem into system gems without network access
rake rdoc             # Build RDoc HTML files
rake release[remote]  # Create tag v0.1.0 and build and push saddlebag-0.1.0.gem to rubygems.org
rake rerdoc           # Rebuild RDoc HTML files
rake stats            # Report code statistics (KLOCs, etc) from the application or engine

So my question is: how do I compile the javascript in the engine for use in the host app?

Answer 1

I had a similar issue. You need to run another instance of webpack on the engine.

On development bin/webpack-dev-server (add it if does not exist).

Pay attention, on deployment, you'll need to run webpack on your engine too, the same way you're bundling it. Here is working example I'm using with Capistrano 3.

  set : your_engine_path, 'some/path/to/your_engine'

  task :install_engine do
    on roles(:app) do
      with rails_env: fetch(:rails_env) do
        within "#{release_path}/#{fetch(:your_engine_path)}" do
          execute :bundle, 'install --path vendor/bundle'
        end
      end
    end
  end

  namespace :webpacker do
    desc 'Install deps with yarn'
    task :yarn_install do
      on roles(:app) do
        within "#{release_path}/#{fetch(: your_engine_path)}" do
          execute 'yarn'
        end
      end
    end

    desc 'Compile JavaScript packs using webpack for production with digests'
    task :compile do
      on roles(:app), in: :sequence, wait: 5 do
        within release_path do
          with rails_env: fetch(:rails_env) do
            execute :bundle, 'exec rake your_engine:compile_assets'
          end
        end
      end
    end
    before :compile, :yarn_install
  end