[vite] Internal server error: Illegal tag name. Use '&lt;' to print '<'.

[Stanzilla]

Discussed in #5

^{Originally posted by Stanzilla May 8, 2023}
Hey there! First, thank you so much for making this plugin.

I've been trying to migrate our Vue + Vite + Electron app to it but getting the following error:

16:21:22.925 › App starting...
Illegal tag name. Use '&lt;' to print '<'.
Illegal tag name. Use '&lt;' to print '<'. (x2)
4:21:24 PM [vite] Internal server error: Illegal tag name. Use '&lt;' to print '<'.
  Plugin: vite-plugin-vue-inspector
  File: /Users/stan/projects/personal/WeakAuras-Companion/src/components/LandingPage.vue?vue&type=script&lang.js
      at createCompilerError (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:19:19)
      at emitError (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1613:29)
      at parseChildren (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:959:21)
      at Object.baseParse (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:858:23)
      at parse (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:3119:25)
      at result (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/vite-plugin-vue-inspector/dist/index.cjs:65:51)
      at new Promise (<anonymous>)
      at compileSFCTemplate (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/vite-plugin-vue-inspector/dist/index.cjs:62:24)
      at TransformContext.transform (/Users/stan/projects/personal/WeakAuras-Companion/node_modules/vite-plugin-vue-inspector/dist/index.cjs:221:16)
      at /Users/stan/projects/personal/WeakAuras-Companion/node_modules/vite-plugin-inspect/dist/index.cjs:878:32

I googled a bit and found threads were people were able to solve this but none of the solutions seemed to apply to us.

The code is here https://github.com/WeakAuras/WeakAuras-Companion/tree/devtools

Any idea as to what we are doing wrong?

Cheers!

[webfansplz]

Sorry, I didn't delve deeply into Electron. Tagging it hopes that someone can solve it.

[Stanzilla]

Sorry, I didn't delve deeply into Electron. Tagging it hopes that someone can solve it.

Actually, should this bug be on the vite-plugin-vue-inspector repo?

[Stanzilla]

Looks like this is a vue bug in general, wonder why it only now shows up with the inspector lib vitejs/vite#8476

[Stanzilla]

It seems to be depending on indents some reason, sometimes the first is not fine but the second one is

      <UIButton
        v-if="result.size / 1024 > 16"
        :class="{ spin: result.computing }"
        @click="generate()"
        type="issue"
      >
        <i
          class="material-icons error"
          v-if="result.size / 1024 > 16"
          >error_outline</i
        >

<UIButton v-if="result.size / 1024 > 16" :class="{ spin: result.computing }" @click="generate()" type="issue">
        <i class="material-icons error" v-if="result.size / 1024 > 16">error_outline</i>

[pathnirvana]

had the same issue in the setup function, even having the < in a comment was enough to trigger this issue.

The solution was to not use < operator, but instead the > operator