7

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:

something_controller.js is missing!

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
Tim Sullivan
  • 16,808
  • 11
  • 74
  • 120
  • 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 Oct 02 '18 at 21:18
  • 1
    The [webpacker gem docs](https://github.com/rails/webpacker#erb) have details, but basically `bundle exec rails webpacker:install:erb`. – Tim Sullivan Oct 03 '18 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 Oct 10 '18 at 05: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 Oct 10 '18 at 15:22
  • You could try rendering the file using ERB directly in your javascript file, see here https://blog.revathskumar.com/2014/10/ruby-rendering-erb-template.html – Edgar Ortega Oct 18 '18 at 17:17

1 Answers1

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

Ryan Clark
  • 764
  • 1
  • 8
  • 29
  • 1
    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. – Tim Sullivan Oct 02 '18 at 20:54