Vue-cli: Pug Templates not loading with Vue Pug

[appsparkler]

Version

3.5.1

Reproduction link

https://github.com/appsparkler/aem-webapp

Environment info

Environment Info:

  System:
    OS: Windows 7
    CPU: (4) x64 Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz
  Binaries:
    Node: 10.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.8.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.5.1
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.5.1
    @vue/cli-plugin-babel: ^3.5.0 => 3.5.1
    @vue/cli-plugin-eslint: ^3.5.0 => 3.5.1
    @vue/cli-service: ^3.5.0 => 3.5.1
    @vue/cli-shared-utils:  3.5.1
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2
    vue: ^2.6.6 => 2.6.9
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.9
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

npm run serve

What is expected?

dev server with application

What is actually happening?

λ npm run serve

[email protected] serve D:\Projects\aem-webapp
vue-cli-service serve

INFO Starting development server...
98% after emitting CopyPlugin

ERROR Failed to compile with 1 errors 7:25:12 PM

Error: Child compilation failed:
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

content="width=device-width,initial-scale=1.0"> The AEM VUE APP...

Vue AEM... 1>

:
SyntaxError: Unexpected token (1:0)

• compiler.js:79 childCompiler.runAsChild
  [aem-webapp]/[html-webpack-plugin]/lib/compiler.js:79:16

• Compiler.js:300 compile
  [aem-webapp]/[webpack]/lib/Compiler.js:300:11

• Compiler.js:556 hooks.afterCompile.callAsync.err
  [aem-webapp]/[webpack]/lib/Compiler.js:556:14

• Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [aem-webapp]/[tapable]/lib/Hook.js:154:20

• Compiler.js:553 compilation.seal.err
  [aem-webapp]/[webpack]/lib/Compiler.js:553:30

• Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [aem-webapp]/[tapable]/lib/Hook.js:154:20

• Compilation.js:1323 hooks.optimizeAssets.callAsync.err
  [aem-webapp]/[webpack]/lib/Compilation.js:1323:35

• Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [aem-webapp]/[tapable]/lib/Hook.js:154:20

• Compilation.js:1314 hooks.optimizeChunkAssets.callAsync.err
  [aem-webapp]/[webpack]/lib/Compilation.js:1314:32

• Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [aem-webapp]/[tapable]/lib/Hook.js:154:20

• Compilation.js:1309 hooks.additionalAssets.callAsync.err
  [aem-webapp]/[webpack]/lib/Compilation.js:1309:36

[appsparkler]

I tried the following solutions :
https://github.com/vuejs/vue-cli/issues/2645
https://github.com/vuejs/vue-cli/issues/2601

but they did not work...

Thanks!!!

[appsparkler]

@sodatea

I've included this in my chainWebpack; and it does work (because my template is in public folder) but it is not a right solution or is it?

const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    pages: {
        index: {
            // entry for the page
            entry: 'src/main.js',
            // the source template
            template: 'public/index.pug',
            // output as dist/index.html
            filename: 'index.html',
            // when using title option,
            // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // chunks to include on this page, by default includes
            // extracted common chunks and vendor chunks.
            // chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
    },
    chainWebpack: config => {
      const pugRule = config.module.rule('pug');
      pugRule.uses.clear();

      pugRule
        .test(/\.pug$/)
        .exclude
          .add(/public.*\.pug$/)
          .end()
        .use('pug-plain-loader')
          .loader('pug-plain-loader');

      config.module
        .rule('publicpugs')
        .test(/public.*\.pug$/)
        .exclude
          .add(/\.vue$/)
          .end()
        .use('raw')
          .loader('raw-loader')
          .end()
        .use('pug-plain')
          .loader('pug-plain-loader')
          .end();
    }
}

[sodatea]

@appsparkler Thanks for the report. After a little investigation I think it's a bug in our configuration - we forgot to use resourceQuery to target the pug rule to templates in .vue only. (https://vue-loader.vuejs.org/guide/pre-processors.html#pug)
Your configuration is a valid workaround but to fully solve this issue I've opened a PR: https://github.com/vuejs/vue-cli/pull/3663

[appsparkler]

@sodatea Thank you for your response and solution. I had to make a small tweak to it in my vue.config.js for it to work - i.e. to clear the rule first and then update it with your changes. It now works perfectly. This tweak may not be required for you since you're working with source files. This is my updated vue.config.js:

module.exports = {
    pages: {
        index: {
            // entry for the page
            entry: 'src/main.js',
            // the source template
            template: 'public/index.pug',
            // output as dist/index.html
            filename: 'index.html',
            // when using title option,
            // template title tag needs to be <title><%= HtmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // chunks to include on this page, by default includes
            // extracted common chunks and vendor chunks.
            // chunks: ['chunk-vendors', 'chunk-common', 'index']
        }
    },
    configureWebpack: {
        plugins: [
          ...get_HTMLWebpackPluginsToCompilePugs(),
          get_PluginToHotReloadIncludedPugs()
        ]
    },
    chainWebpack: (...args) => {
        add_ruleForVuePlusPugs.apply(null, args);
    }
}

// abstracted methods
function get_HTMLWebpackPluginsToCompilePugs() {
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const glob = require('glob');
    const plugins = [];
    try {
        glob.sync('src/**/*.pug').forEach(templatePath => {
            const destPath = templatePath.replace('src/', '').replace('.pug', '.html');
            plugins.push(new HtmlWebpackPlugin({
                template: templatePath,
                filename: destPath,
                base: 'dist',
                inject: false
            }));
        });
    } catch (e) {
        throw e;
    }
    return plugins;
}

function add_ruleForVuePlusPugs(webpackConfig) {
    const pugRule = webpackConfig.module.rule('pug');
    pugRule.uses.clear();
    pugRule
        .test(/\.pug$/)
        .oneOf('pug-vue')
          .resourceQuery(/vue/)
          .use('pug-plain-loader')
            .loader('pug-plain-loader')
            .end()
          .end()
        .oneOf('pug-template')
          .use('raw')
            .loader('raw-loader')
            .end()
          .use('pug-plain')
            .loader('pug-plain-loader')
            .end()
        .end()
}

function get_PluginToHotReloadIncludedPugs() {
    const LiveReloadPlugin = require("webpack-livereload-plugin");
    return new LiveReloadPlugin({
        appendScriptTag: true
    });
}