Tricky Src Imports : no compile or hot-reload with version 17.4.2
sebastienroul opened this issue · 0 comments
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 adescriptor
of our html file, and put it in thedescriptorCache
- => 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 thecompileTemplate
- => the main problem is
TemplateLoader
send tocompiler
the cache object with it's 'original'ast
, not with the modified source
- => the main problem is
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