Compiling error when the template of the .vue file has the attribute lang="html"

[eltonchan]

Version

15.2.6

Reproduction link

https://github.com/eltonchan/test_vue_loader

Steps to reproduce

1、use vue cli3 create application （vue cli3 default use 15 version for vue-loader）
2、add html-loader to webpapck Configuration

chainWebpack: (config) => {
        config.module
            .rule('html')
            .test(/\.html$/)
            .use('html-loader')
            .loader('html-loader')
            .end();
    },

3、.vue file template add lang="html" attribute

<template lang="html">

4、npm run serve

What is expected?

compiling success

What is actually happening?

error in ./src/App.vue?vue&type=template&id=7ba5bd90&lang=html&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
Error compiling template:

---

By the way, in 14 version No such problem。

[GreenMelon]

Did U find any solution ? It is troubling me too 😭

[TotomInc]

I'm struggling into this too, if I'm correct this is more from vue-template-compiler module, as I'm trying to build a vue-plugin using rollup and vue-template-compiler with .vue files.

EDIT: the only quick and easy fix right now (if you can touch the files) is to remove the lang="html" attribute.

[adamgoose]

This proves problematic for a component that uses a language other than html. For example, we use pug for all of our vue component files.

I'm getting the same error, but also can see a message beneath the template:

error  in ./src/components/Presence.vue?vue&type=template&id=3482c7ab&lang=pug&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
  Error compiling template:

  v-toolbar-items(transition="slide-y-transition")
    v-avatar.mx-2.user-avatar(size="24" v-for="(id, i) in present" :key="i")
      img(:src="`https://someawesomeavatarserver.com/${id}`")

  - Component template requires a root element, rather than just text.

When I nest the entire component in a div, the compiler gives me the same error for another component, then another, then another...

It seems as though, in my case at least, the loader doesn't recognize v-toolbar-items(...) as a root element.

[oixan]

this problem is happen to me too. How did you solve it?

[mgrinspan]

Happens to me as well, my workaround was setting my version constraint to "<15.0.0"

[oixan]

Can you explain me the steps? Thanks!

[mgrinspan]

Modify your package.json file to have "vue-loader": "<15.0.0" in the require section. Then run npm install

[oixan]

Now is finally working , thanks!

this is my final webpack config with chunks.

`const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps(false, 'source-map')
.webpackConfig({
output: {
// Chunks in webpack
publicPath: '/',
chunkFilename: 'js/[name].[chunkhash].js',
},
module: {
rules: [
{
test: /.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: { appendTsSuffixTo: [/.vue$/] }
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: file => (
/node_modules/.test(file) &&
!/.vue.js/.test(file)
)
},
],
},
plugins: [
],
resolve: {
extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
},
});
`

[eltonchan]

this problem is happen to me too. How did you solve it?

just remove lang="html" attribute can work

[Chickyky]

in file .vue if use <template> have attribute "lang" will build error text "module.exports = "" outside root element will be ignored
example in file app.vue I use
<template src="./templates/layout.pug" lang="pug"></template>
I use vue-loader@15.5.1 (newest)
...
I fix this by downgrade version vue-loader to 14.1.1
Work like a charm!
hope team vue-loader review it

[eltonchan]

sorry . the Reproduction link is Invalid. I delete it

[pxlrbt]

@posva This issue still seems to exists in vue-loader 15.7.2. When importing templates via src.

The following vue file:

<template src="./test.html"></template>

Results in this error

ERROR in ./resources/js/components/test/test.html?vue&type=template&id=7a788f03& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/html-loader!./resources/js/components/test/test.html?vue&type=template&id=7a788f03&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)

Errors compiling template:
  text "module.exports = "" outside root element will be ignored.
  1  |  module.exports = "<div class=\"test\"></div>";

Downgrading vue-loader to version 14 fixes the issue. Is this an vue-loader issue or could this be a config issue? I am using laravel-mix.

[posva]

It could be a config issue but we would need a repro using the vue cli or bare webpack + vue-loader.
Maybe there is an open issue already in this repo. If there isn't and you manage to reproduce in an isolated environment like vue cli or bare webpack + vue loader (no laravel-mix), please, open a new issue.
Locking this one as it's outdated, the repro is missing and there isn't anything to add