Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sebastienroul opened this issue Mar 25, 2024 · 0 comments
Open

Comments

@sebastienroul
Copy link

sebastienroul commented Mar 25, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant