devtools icon indicating copy to clipboard operation
devtools copied to clipboard

When using `pug` templates with `devTools` enabled: `Illegal tag name. Use '&lt;' to print '<'.`

Open rudolfbyker opened this issue 2 years ago • 2 comments

Environment


  • Operating System: Linux
  • Node Version: v16.14.2
  • Nuxt Version: 3.5.3
  • Nitro Version: 2.4.1
  • Package Manager: [email protected]
  • Builder: vite
  • User Config: devtools
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-78ly8d?file=nuxt.config.ts

Describe the bug

When using pug templates with devTools enabled, I can't use the < or > operators inside attributes. They cause this error: Illegal tag name. Use '&lt;' to print '<'. When I disable devTools, the problem goes away.

Additional context

No response

Logs

No response

rudolfbyker avatar Jun 06 '23 20:06 rudolfbyker

This seems to be a bug of https://github.com/webfansplz/vite-plugin-vue-inspector

Currently the workaround is to disable it via:

export default defineNuxtConfig({
  devtools: {
    componentInspector: false
  },
})

antfu avatar Jun 08 '23 16:06 antfu

@antfu The above workaround does not works for me. Still it is showing the error.

Also does not seems to be a vite-plugin-vue-inspector issue, as when I created a fresh project, devtools is working but not in an existing project with many modules and plugins.

shwetaAjmeraInfotech avatar Oct 25 '23 13:10 shwetaAjmeraInfotech