Rails 5.2 + Webpacker: rendering a partial inside javascript

Question

I have a javascript file (something_controller.js.erb; technically Stimulus, but I don't think that matters) where I'd like to include the content of a partial as the HTML it'll append later on.

I enabled support for ERB with Webpacker, but a call to <%= render partial: 'shared/condition' %> doesn’t work. It simply quietly fails to generate the .js file and include it.

This code doesn’t work:

const html = `<%= ApplicationController.renderer.render partial: 'shared/condition' %>`

It’s not a renderer.render error, though, because this works:

const html = `<%= ApplicationController.renderer.render inline: 'something' %>`

The contents of shared/_condition.html.erb isn’t weird, and has no variables:

<div data-controller='condition'>
  <a href='#' data-action='condition#remove'><i class="fas fa-trash-alt"></i></a>
  <a href='#' data-toggle="popover" data-target='condition.item' data-action='condition#doNothing'>Item</a>
  <a href='#' data-toggle="popover" data-target='condition.value' data-action='condition#doNothing'>Value</a>
</div>

I’ve tried every combination of path I can think of: app/views/shared/condition, /app/views/shared/condition, with the _, with the .html.erb. I've tried rendering template: and file:... I'm stumped.

Semi-related: is there somewhere I can see any errors generated? The log shows the compilation succeeded in general, but the controller this is in simply isn’t generated. I can’t find any obvious error log.

ETA: In development.log, this appears:

[Webpacker] Compiling…
  Rendered shared/_condition.html.erb (36.1ms)
[Webpacker] Compiled all packs in /Users/timsullivan/dev/thing/public/packs

... so it does seem to be rendering the partial, but the something_controller.js file is not being included in the combined application.js:

In an attempt to find an error somewhere, I tried running:

timsullivan$ rails assets:precompile
yarn install v1.6.0
(node:45691) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.49s.
Webpacker is installed 🎉 🍰
Using /Users/timsullivan/dev/thing/config/webpacker.yml file for setting up webpack paths
Compiling…
Compiled all packs in /Users/timsullivan/dev/thing/public/packs

Just out of interest, how do you enable .erb support in webpacker? I'd love to do that in one of my own projects. — stephenmurdoch
– stephenmurdoch, Commented Oct 2, 2018 at 21:18
The webpacker gem docs have details, but basically bundle exec rails webpacker:install:erb. — Tim Sullivan
– Tim Sullivan, Commented Oct 3, 2018 at 13:08
Instead of loading the html in compiled js, can you not render that partial in a hidden element on the page and use js to access html of that element wherever needed? — Chirag
– Chirag, Commented Oct 10, 2018 at 5:05
I may ultimately go that way, but I'd like to know where I'm going wrong. Everything seems to be correct, so why isn't it working? — Tim Sullivan
– Tim Sullivan, Commented Oct 10, 2018 at 15:22
You could try rendering the file using ERB directly in your javascript file, see here blog.revathskumar.com/2014/10/ruby-rendering-erb-template.html — Edgar Ortega
– Edgar Ortega, Commented Oct 18, 2018 at 17:17

Ryan Clark · Accepted Answer · 2018-10-02 20:50:37Z

0

Assuming you're appending the rendered partial to an element with jquery or something, you'll need to escape the contents of the erb tag.

Try this: "<%= escape_javascript(render("/path/after/views/condition")) %>"

More thorough explanation here: https://stackoverflow.com/a/1623813/695186

answered Oct 2, 2018 at 20:50

Ryan Clark

7641 gold badge8 silver badges29 bronze badges

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

1 Comment

Tim Sullivan Over a year ago

Thanks for the reply. That doesn't work, unfortunately. I'm using the backtick quotes in ES6, which allow pretty liberal string literals. If I copy the contents of the partial and paste it instead between the backtick quotes, it works fine. I did test your suggestion anyway, just now, to make sure, and the problem remains.

Collectives™ on Stack Overflow

Rails 5.2 + Webpacker: rendering a partial inside javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related