Vue-loader: Setting pug via webpack config won't render templates

[evenfrost]

I want to provide pug as template pre-processor in webpack config to avoid writing lang="pug" in every component.

My relevant chunk of Webpack config is:

  module: {
    loaders: [{
      test: /\.pug$/,
      exclude: /node_modules/,
      loader: 'pug',
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
    }, {
      test: /\.vue$/,
      exclude: /node_modules/,
      loader: 'vue',
    }],
  },
  vue: {
    loaders: {
      html: 'pug',
      css: 'style!css!stylus',
    },
  },

I write components like this:

<!-- index.vue -->
<template src="./template.pug"></template>
<script src="./script.js"></script>
<style src="./style.styl"></style>

The result is following error in console: vue.js:2643[Vue warn]: Failed to mount component: template or render function not defined., and template won't render. However, Stylus style files are handled correctly without lang="stylus". Is it bug or I may be missing something?

[LinusBorg]

• Webpack version?
• Can you share a repsoitory where this is reproducable?

[evenfrost]

https://github.com/evenfrost/vue/tree/vue-loader-pug-issue

webpack: 1.14.0
vue: 2.1.8
vue-loader: 10.0.2
Node.js: 7.4.0

EDIT: Updated package versions.

[kazupon]

Thank you for your reproduction codes!
However, I could not reproduce this issue.
Close.

[evenfrost]

Please reopen, issue is still reproduced with all dependencies updated to their latest versions.
@kazupon I see you closed bunch of similar pre-processor issues in a while, please consider checking more thoroughly before doing that, as at least this issue still exists.

[LinusBorg]

We close issues as soon as we find that we cant see any bug.

If you disagree (as you do), you can still comment (as you did here), and we can reopen the issue (which we might, if we can reproduce - I will try tonight hopefully).

[ktsn]

It's indeed a bug. The imported template should be compiled object having render/staticRenderFns, but it actually be a raw function that the pug-loader outputs.
Maybe if html option is specified, this will be occurred. We need to inject the template loader after the user-defined loaders for such case in this function.

Side note: you should use pug-html-loader instead, because vue-loader seems to cannot adapt to pug-loader since it returns a function instead of a template string.

[evenfrost]

Thank you for your response. I've created a new branch to test the issue with pug-html-loader instead, and behavior is similar, though now it throws the following error:

Loader /home/evenfrost/work/projects/vue/source/node_modules/pug/lib/index.js didn't return a function
 @ ./client/components/app/index.vue 8:23-54

But again, including lang="pug" renders template properly, while omitting the attribute doesn't.

[kazupon]

@evenfrost
Thanks for your reproduction code again.

@ktsn
Thanks for your advise.

I reproduced this issue. I'll try to fix this issue.

[kazupon]

Support loader channing.
https://github.com/vuejs/vue-loader/releases/tag/v10.1.0

If you want to use pug-loader, you need to convert to HTML string from Function with this features.
already @ktsn said, I recommend use pug-html-loader

[evenfrost]

@kazupon I appreciate your desire to keep open issues at minimum, but this one is still reproduced. I've updated to [email protected], also added webpack@2, bumped the config and cleaned the code up.

Again, when you leave index.vue as is, nothing is rendered, and console shows:

[Vue warn]: Failed to mount component: template or render function not defined. 
(found in component <App> at /home/evenfrost/work/projects/vue/source/client/components/app/index.vue)

Please note that I'm using standalone vue build.

When you add lang="pug" to the <template> tag, error is gone, and everything is rendered correctly.

This branch shows the same issue with pug-html-loader, not with pug-loader. To reproduce it, simply clone the branch and do either

yarn install
yarn start

or

npm install
npm start

[evenfrost]

Seems it has been fixed in latest release, thanks for resolving. :+1: