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

[Yorchi]

Hi
im working with vue and everything going great, but at the moment to compile with erb, the console shows me a error:

ERROR in ./app/javascript/packs/onboarding/HomeForm.vue.erb
Module parse failed: /Users/yorch/SitesRails/homie/node_modules/rails-erb-loader/index.js??ref--3!/Users/yorch/SitesRails/homie/app/javascript/packs/onboarding/HomeForm.vue.erb Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <div>
|         <form action="/" style="margin-top: 50px;" @submit.prevent="login">
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

please, hope can help me!

thanks

[gauravtiwari]

@andradedev Could you please share your HomeForm.vue.erb? Do your have erb loader in the config/loaders directory?

[doits]

@andradedev simply change config/loaders/vue.js testso it includes .erb:

# config/loaders/vue.js
module.exports = {
  test: /\.vue(\.erb)?$/,
  ...
}

that made it work for me

[gauravtiwari]

module.exports = {
  test: /\.vue(\.erb)?$/,
  enforce: 'pre',
  exclude: /node_modules/,
  use: 'rails-erb-loader',
  options: {
    runner: 'bin/rails runner'
  }
}

[doits]

@gauravtiwari I think config/loaders/erb.js already takes care to compile the .vue.erb template before other loaders. And looking at the other loaders (for example coffee.js), they simply have the .erb extension optionally included in their test, that's why I think adding the .erb to the test of vue.js (see above) should be sufficient.

[Yorchi]

thanks for yours quick reply, here is the HomeForm.vue.erb file

<template>
    <div>
        <form action="/" style="margin-top: 50px;" @submit.prevent="login">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" v-model="home.name">
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Login">
            </div>

            <label>{{greeting}}</label>
        </form>
        
    </div>
</template>

<script>
    export default {
        props: [
            'user'
        ],
        data() {
            return {
                home: {
                    name: ''
                },
            }
        },
        computed: {
            greeting() {
                return `${this.home.name} ${this.user}`
            }
        },
        methods: {
            login() {
                alert('login');
            }
        }
    }
</script>

[Yorchi]

@gauravtiwari and @doits thie didnt work for me :(

module.exports = {
  test: /\.vue(\.erb)?$/,
  ...
}

by the way mi packages versions are:

"rails-erb-loader": "^5.0.1"
"webpack": "^2.6.1"

[doits]

@andradedev I did exactly this yesterday after a fresh install of webpacker 2.0.0 and it worked. I have "rails-erb-loader": "^5.0.2" though.

I added a PR (#500) to make that change default.

[Yorchi]

im using rails 4.2.5, i think is the reason.., can you try to reproduce with that version?

thanks!

[Yorchi]

hey its working, but the compiler does not accept any helper from Rails, ej. form_for, asset_path, image_tag etc etc.

Is this a bug o an error from the runner?

[gauravtiwari]

@andradedev No those helpers aren't supported - just asset helpers.

[gauravtiwari]

Documentation: https://github.com/rails/webpacker#using-helpers

[Yorchi]

oo perfect, thanks a lot for your help!