Webpacker: trouble with erb-loader, is not working with .vue.erb files

[psychoslave]

Similar with #498 but the then applied merged code doesn't seem to work on my intance.

Here is what I'm running:

• ruby 2.4.3
• Rails 5.1.5
• webpacker 3.2.2
• vue-hot-reload-api 2.2.0
• vue-loader 14.1.1
• vue-style-loader 4.0.1
• vue-template-compiler 2.5.13
• vue-template-es2015-compiler 1.6.0
• vue 2.5.13

Here are the file I'm trying to use to test .vue.erb:

In app/views/layouts/application.html.erb

    <%= javascript_pack_tag 'application' %>

in app/javascript/packs/application.js.erb (doesn't matter here, but js.erb does compile well here)

import Vue from 'vue'
import App from './app'

Vue.config.productionTip = true

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue(App);
})

And finaly app/javascript/packs/app.vue:

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    console.log('hello')
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

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

As this, it does work, but moving app/javascript/packs/app.vue to app/javascript/packs/app.vue.erb doesn't work:

ERROR in ./app/javascript/packs/application.js.erb
Module not found: Error: Can't resolve './app' in './app/javascript/packs'
 @ ./app/javascript/packs/application.js.erb 11:0-24

It works, I do see my hello in the browser console.

Finally here is the config/webpack/loaders/vue.js:

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 }
  }]
}

Let me know if you need more information of if you have an idea about what I missed.

[ytbryan]

Have you read https://github.com/rails/webpacker/issues/1256? Does it solve your issue?

[psychoslave]

No I still end up with:

Error: Cannot find module "./app"

But it did made me change some things, so namely, runned yarn add rails-erb-loader and added to config/webpack/loaders/vue.js

  …},
  {
    loader: 'rails-erb-loader',
    options: {
      runner: 'bin/rails runner',
      dependenciesRoot: '../app'
    }
  }]

I didn't make anything regarding the "At .vue" prescribed action, as I didn't thought I was concerned with this one.

[psychoslave]

I also tried to move app.vue.js directly in app/javascript, as I wasn't sure what the dependenciesRoot: '../app' is really meaning.

[psychoslave]

Got it, it seems that .vue.erb have to be explicited, unlike .vue extension. :smile:

So the following works fine:

import App from './app.vue.erb'

[psychoslave]

thank you @ytbryan your hint helped me a lot. :+1:

[ytbryan]

😄👍

[psychoslave]

As far as I'm concerned, the issue can be closed, but I don't know if this ok that I do that myself in this project.

[gauravtiwari]

thanks @ytbryan