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:

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.

webpack has not yet re-run to reflect updates.

You have misconfigured Webpacker's config/webpacker.yml file.

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?

This is an exceptionally good question which deserves attention. Can you leave a comment and tag me if its not answered in a few days so I can put a bounty on it? — max
– max, Commented May 4, 2021 at 13:15
@max this question is still unresolved. I'm hoping maybe a future version of webpacker will make it possible without so much effort. Resource constraints on my project demand that I focus my efforts elsewhere at this time. — Fred Willmore
– Fred Willmore, Commented May 7, 2021 at 19:25
@FredWillmore clean pack directory in public directory, delete the cache(not necessary), and before starting rails server start web packer by following command in your terminal bin/webpack-dev-server. that will updated manifest file and you might have it working. — Hiren Bhalani
– Hiren Bhalani, Commented May 10, 2021 at 6:16

brcebn · Accepted Answer · 2021-05-04 11:34:41Z

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

answered May 4, 2021 at 11:34

brcebn

1,7721 gold badge27 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Fred Willmore Over a year ago

I am able to start a server on the host app but I get an error: Error: Cannot find module 'webpack-cli/bin/config-yargs'. I've looked at posts about that error but they all have to do with upgrading my version of webpack. I just ran yarn a couple minutes ago so I don't think there's anywhere to go with upgrading dependencies. The binstubs for webpack and webpack-dev-server are identical between the host and engine.

brcebn Over a year ago

Did you run yarn on you engine directory or in the main directory?

Fred Willmore Over a year ago

in the engine directory - I have run it in the main app directory as well; I was able to compile all the js using rake webpacker:compile but it looks like yarn does the same thing there, so I was hoping for some luck in the engine directory

Fred Willmore Over a year ago

I think I'm abandoning this project. I've wasted two days just trying to get this tutorial running, never mind my actual project, which is not the best candidate for migrating to webpacker anyway. It seems like the thing to do would be to put all the javascript in my engine into a npm package instead of trying to do contortions with webpacker

brcebn Over a year ago

It took me days to finally have webpack on an engine only with a Rails API app. It's working but I had to dig for a long time. Maybe add you webpack-dev-server file on your issue. I'll compare it to mine, just in case I made an update that I don't remember right now.

Collectives™ on Stack Overflow

Using webpacker with a Rails engine

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related