Tricky Src Imports : no compile or hot-reload with version 17.4.2

[sebastienroul]

Using Webpack 3.12.4 + vue-loader 17.4.2.

Our practice is to split html and js (for maintenance purpose)

Here is a simplified sample of what we have

• index.vue

  <template src="./index.html"></template>
  <script src="./index.js"></script>

• index.js

  export default {
  data () {
  return {}
  }

• index.html

  <div>
  <template v-if="loading">
    <div>
      FOO
    </div>
  </template>
  <template v-else>
    <div >
      BAR
    </div>
  </template>
  </div>

In version 17.4.1 before commit src/templateLoader.ts

It worked like a charm.

But after, this commit (and also in version 17.4.0) it doesn't work any more.

=> It silenty kill all our app, just with a build in our CDI.

• Problem : Compile Error : Invalid end tag

As the 'html' part is parsed via AST, AST try to find a child which is a template => and consider it as THE template of the page : In our cas :

<template v-else>
      <div >
        BAR
      </div>
    </template>

And then fail in compilation with 'Invalid end tag'....

• Fix try

We try to fix it, by encapsulating the html code in a template :

 <template>
  <div>
    <template v-if="loading">
      <div>
        FOO
      </div>
    </template>
    <template v-else>
      <div >
        BAR
      </div>
    </template>
  </div>
</template>

It works ! vue-loader give the control to compiler-scf.js, and everything is ok. Html is 'compiled'

BUT the hotreload doesn't work anymore.

• Reason We dived in the deep, and our analysis is :
  • At the first load : the Templateloader make a descriptor of our html file, and put it in the descriptorCache
  • => the descriptor contains an ast property and a source property
  • When new save happened, the TemplateLoader find our html in the cache and send it to the compileTemplate
  • => the main problem is TemplateLoader send to compiler the cache object with it's 'original' ast, not with the modified source

Then hot-reload happened, but not with the new code, only with original source ast-parsed.

Sorry for being so long to explain, but it's tricky.

Let me know if you need any explanation or info.

Regards