CODEWITHSUNDEEP
ruby-on-railspugerbloadervue-loader
zubroid
zubroid

Reputation: 121

How to allow pug pages to be precompiled by erb (with `.pug.erb` extension)

I'm pretty new with Rails + Vue. I've created a new rails project with Vue and as a renderer for templates I'm using PUG. In VUE file I have:

<template src="../pages/cars.pug.erb" lang='pug'></template>

I need assets on the page. For PUG I added a loader 

module.exports = {
  test: /\.pug(\.erb)?$/,
  loaders: 'pug-html-loader'
}

My cars.pug.erb looks like

div
  <% helpers = ActionController::Base.helpers %>
  div(class="<%= 1 + 1%>")

But it gives me 

 ERROR in ./app/assets/javascript/packs/pages/cars.pug.erb
12:27:54 webpacker.1 | Module parse failed: ../node_modules/pug-html-loader/lib/index.js!../node_modules/rails-erb-loader/index.js??ref--3!../app/assets/javascript/packs/pages/cars.pug.erb Unexpected token (1:0)
12:27:54 webpacker.1 | You may need an appropriate loader to handle this file type.
12:27:54 webpacker.1 | | <div><div class="2"></div></div>
12:27:54 webpacker.1 |  @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./app/assets/javascript/packs/pages/cars.pug.erb

And looks like it renders .erb and .pug but it stops for some reason (btw I tried to write loaders: ['html-loager', 'pug-html-loader'] and it started to ignore .erb)

Could somebody show me how to solve this annoying issue?

P.S. Rails - 5.1.3 and completely fresh projects with newest libs P.P.S. I made an issue here https://github.com/rails/webpacker/issues/620

UPDATE 10.8.2017:

The thing is about in .vue

this code works fine

<template lang='pug'>
  div
    div <%= "test"%>
</template>

but when it is in a separate file

<template src="../pages/cars.pug.erb" lang='pug'></template>

it does not work. I think it's already question to "vue-loader"

Upvotes: 2

Views: 1021

Answers (1)

user229044
user229044

Reputation: 239471

Mod note: Answer extracted from the question above, see revision 4

As I mentioned above the issue was in "vue-loader". I needed to "precompile" .erb before it can compile in in according to lang (in my case lang='pug').

To do so I added "preLoader" with loading "vue-loader"

preLoaders: {
  pug: 'rails-erb-loader'
}

Because I use Rails 5 + Webpacker + Vue.js, I put it in webpack/loader/vue.js

module.exports = {
  test: /.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: true,
    loaders: {
      js: 'babel-loader',
      file: 'file-loader',
      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax'
    },
    preLoaders: {
      pug: 'rails-erb-loader'
    }
  }
}

Basically it check lang in template and before using main loader for that language it precompile code with provided in preLoaders loader.

Upvotes: 0

Related Questions