How do I use rails-erb-loader in a webpack=vue project?

[ytbryan]

Hi @rhys-vdw

Thank you for maintaining rails-erb-loader.

I was trying to get rails-erb-loader to work on webpacker and I encounter the following error: Error: Module build failed: Error: Command failed: bin/rails runner /Users/ytbryan/Desktop/app/node_modules/rails-erb-loader/erb_transformer.rb __RAILS_ERB_LOADER_DELIMETER__ erb 0. Can you give me some advice? Here's the repo:
https://github.com/ytbryan/rails-erb-loader-vue

---

This is my app/config/webpack/loaders/vue.js config

const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { extractCSS }
  },{
    loader: 'rails-erb-loader', 
    options: {
      runner: 'bin/rails runner',
      dependenciesRoot: '../app'
    }
  }]
}

---

here's my app/javascript/app.vue.erb:

<template>
  <div id="app">
    <p>{{ message }}</p>
    <%= image_tag "clinic.jpeg" %>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello x!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

---

Here's the full error:

Error: Module build failed: Error: Command failed: bin/rails runner /Users/ytbryan/Desktop/app/node_modules/rails-erb-loader/erb_transformer.rb __RAILS_ERB_LOADER_DELIMETER__ erb 0
(erb):4:in `<main>': undefined method `image_tag' for main:Object (NoMethodError)
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/2.4.0/erb.rb:896:in `eval'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/2.4.0/erb.rb:896:in `result'
	from /Users/ytbryan/Desktop/app/node_modules/rails-erb-loader/erb_transformer.rb:26:in `block in <top (required)>'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/2.4.0/timeout.rb:76:in `timeout'
	from /Users/ytbryan/Desktop/app/node_modules/rails-erb-loader/erb_transformer.rb:20:in `<top (required)>'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/commands/runner/runner_command.rb:34:in `load'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/commands/runner/runner_command.rb:34:in `perform'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/thor-0.20.0/lib/thor/command.rb:27:in `run'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/thor-0.20.0/lib/thor/invocation.rb:126:in `invoke_command'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/thor-0.20.0/lib/thor.rb:387:in `dispatch'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/command/base.rb:63:in `perform'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/command.rb:44:in `invoke'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/railties-5.1.4/lib/rails/commands.rb:16:in `<top (required)>'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:292:in `require'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:292:in `block in require'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:258:in `load_dependency'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:292:in `require'
	from /Users/ytbryan/Desktop/app/bin/rails:9:in `<top (required)>'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:286:in `load'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:286:in `block in load'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:258:in `load_dependency'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:286:in `load'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/2.4.0/rubygems/core_ext/kernel_require.rb:55:in `require'
	from /Users/ytbryan/.rbenv/versions/2.4.2/lib/ruby/2.4.0/rubygems/core_ext/kernel_require.rb:55:in `require'
	from -e:1:in `<main>'
Running via Spring preloader in process 37808

    at ChildProcess.exithandler (child_process.js:275:12)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Socket.stream.socket.on (internal/child_process.js:346:11)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at Pipe._handle.close [as _onclose] (net.js:554:12)

[rhys-vdw]

Hi @ytbryan, this has nothing to do with Vue. You don't have a method called image_tag in your global Ruby context. Most likely you'll need to explicitly import the module that contains that method...

Try adding this line to the top of the file:

<% include ActionView::Helpers::AssetTagHelper %>

[rhys-vdw]

Please see #33 for more info.

[ytbryan]

Thanks @rhys-vdw

Fixed https://github.com/ytbryan/rails-erb-loader-vue