Skip to content

Misleading error thrown when html end tag is missing (plugin-vue) #5771

@hidewak

Description

@hidewak

Describe the bug

On a Vue project, when an html end tag is missing/wrongly formatted, the following error is thrown:

[vite] Internal server error: Cannot read property 'line' of undefined
  Plugin: vite:vue
  File: repro/src/components/HelloWorld.vue
      at createRollupError (repro\node_modules\@vitejs\plugin-vue\dist\index.js:4167:29)
      at repro\node_modules\@vitejs\plugin-vue\dist\index.js:4448:51
      at Array.forEach (<anonymous>)
      at transformMain (repro\node_modules\@vitejs\plugin-vue\dist\index.js:4448:12)
      at TransformContext.transform (repro\node_modules\@vitejs\plugin-vue\dist\index.js:4805:16)
      at Object.transform (repro\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:42396:53)
      at async doTransform (repro\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:56801:29)

Instead of:

[vite] Internal server error: Element is missing end tag.
  Plugin: vite:vue
  File: repro/src/components/HelloWorld.vue
      at createCompilerError (repro\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:19:19)
      at emitError (repro\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:1600:29)
      at parseElement (repro\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:1152:9)
      at parseChildren (repro\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:943:28)
      at parseElement (repro\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:1131:22)
      at parseChildren (repro\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:943:28)
      at parseElement (repro\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:1131:22)
      at parseChildren (repro\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:943:28)
      at Object.baseParse (repro\node_modules\@vue\compiler-core\dist\compiler-core.cjs.js:858:23)
      at Object.parse (repro\node_modules\@vue\compiler-dom\dist\compiler-dom.cjs.js:3060:25)

When I first run vite it happens that the correct error is displayed but after a refresh or hot reload the other one will be displayed.

Seems to be thrown from /vite/packages/plugin-vue/src/utils/error.ts at line 14 & 15 because the error argument doesn't have the property start, works on my side if I directly remove the start level.

Reproduction

https://github.com/hidewak/repro-vite-plugin-vue

 git clone https://github.com/hidewak/repro-vite-plugin-vue && cd repro-vite-plugin-vue && npm i && npm run dev

System Info

System:
    OS: Windows 10 10.0.19041
    CPU: (24) ia32 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 23.76 GB / 31.94 GB
Binaries:
    Node: 14.17.0 - C:\Program Files (x86)\nodejs\node.EXE
    Yarn: 1.22.15 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.20.3 - C:\Program Files (x86)\nodejs\npm.CMD
Browsers:
    Chrome: 96.0.4664.45
    Edge: Spartan (44.19041.1.0)
    Internet Explorer: 11.0.19041.1
npmPackages:
    @vitejs/plugin-vue: ^1.9.3 => 1.9.4
    vite: ^2.6.4 => 2.6.14

Used Package Manager

npm

Logs

[vite] Internal server error: Cannot read property 'line' of undefined
  Plugin: vite:vue
  File: repro/src/components/HelloWorld.vue
      at createRollupError (repro\node_modules\@vitejs\plugin-vue\dist\index.js:4167:29)
      at repro\node_modules\@vitejs\plugin-vue\dist\index.js:4448:51
      at Array.forEach (<anonymous>)
      at transformMain (repro\node_modules\@vitejs\plugin-vue\dist\index.js:4448:12)
      at TransformContext.transform (repro\node_modules\@vitejs\plugin-vue\dist\index.js:4805:16)
      at Object.transform (repro\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:42396:53)
      at async doTransform (repro\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:56801:29) (x2)
  vite:time 50.90ms /src/components/HelloWorld.vue +29ms
  vite:time 0.81ms /favicon.ico +15ms

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions