vue-loader with vue-html-loader not work

Created on 17 Apr 2017  路  8Comments  路  Source: vuejs/vue-loader

Problem

I would like to enable html interpolate, but not work.

Webpack config

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: { 
    loaders:
    {
      css: { ... },
      html: 'vue-html-loader?interpolate'
    } 
  }
}

Errors

 error  in ./Xxx.vue
(Emitted value instead of an instance of Error)
  Error compiling template:
  module.exports = "\n<div>\n</div>\n";
  - text "module.exports = "\n" outside root element will be ignored.
need repro

Most helpful comment

Maybe because<template lang="html">,just use <template>

All 8 comments

367

In previous versions, it can work.
But now can not work, this is why?

This rather seems like your template is not formatted correctly.

Please provide a runnable reproduction.

@ovo4096 Hello! Help me please! I have the same issue. How did you fix your problem?

@ma1oy exactly the same issue? It from the example above it looks like the template wasn't formatted properly, there shouldn't be anything outside of the root dom element.

The issue I had was using pug: ['html-loader', 'pug-html-loader']. Substitute html-loader with vue-html-loader and the problem persists. If you are in a similar situation, just use pug: 'pug-html-loader' in your loader options. vue-loader is expecting a simple string of html and html-loader returns a script.

Maybe because<template lang="html">,just use <template>

I also encountered the same problem, and I use <template> in instead of <template lang="html"> work.
Although, inner <style></style> can't have anything.....
That depressed.

FFS! Thanks to @WarrenXia , I just waste my 5 hours just because of that **.

Was this page helpful?
0 / 5 - 0 ratings