The combination of specific statements and comments can cause errors (vite & vite build)

[zaakn]

Describe the bug

In a *.vue file with certain statements and comments, a strange error will appear after running yarn dev(vite) and previewing the page in the browser:

<template>
  <p>Foobar</p>
</template>

<script lang="ts">
import { defineComponent } from "vue";

type AppData = {};

/*
export default
*/
export default defineComponent({
  name: "App",
  data(): AppData {
    return {};
  },
});
</script>

[vite] Internal server error: Element is missing end tag.
  Plugin: vite:vue
  File: /private/tmp/foobar/src/App.vue
  3  |  </template>
  4  |  
  5  |  <script lang="ts">
     |   ^
  6  |  import { defineComponent } from "vue";
  7  |  
      at createCompilerError (/private/tmp/foobar/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:16:19)
      at emitError (/private/tmp/foobar/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1193:29)
      at parseElement (/private/tmp/foobar/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:828:9)
      at parseChildren (/private/tmp/foobar/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:654:28)
      at Object.baseParse (/private/tmp/foobar/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:574:23)
      at Object.parse (/private/tmp/foobar/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:3050:25)
      at parse (/private/tmp/foobar/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:156:26)
      at createDescriptor (/private/tmp/foobar/node_modules/@vitejs/plugin-vue/dist/index.js:4048:62)
      at handleHotUpdate (/private/tmp/foobar/node_modules/@vitejs/plugin-vue/dist/index.js:4244:24)
      at async handleHMRUpdate (/private/tmp/foobar/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:59185:37)

Reproduction

The code must have these points:

• a type declaration

type AppData = {};
// or
type AppData = string;

• a comment line that starts with "export default" in a multi-line comment

/*
export default
or 
    export default (starts with some space characters, and "export default" is following)
*/

• a normal export default statement

export default {}

• Errors do not occur immediately after running the command yarn dev (vite), but after the page has been tried to preview. (actually, both vite+previewing and vite build)
  • The first browsing, the error content is the below one: Element is missing end tag.
  • Then refresh the page, the error content will change to be:

expand to view another error

[vite] Internal server error: Cannot read property 'line' of undefined
  Plugin: vite:vue
  File: /private/tmp/foobar/src/App.vue
      at createRollupError (/private/tmp/foobar/node_modules/@vitejs/plugin-vue/dist/index.js:4092:29)
      at /private/tmp/foobar/node_modules/@vitejs/plugin-vue/dist/index.js:4346:51
      at Array.forEach ()
      at transformMain (/private/tmp/foobar/node_modules/@vitejs/plugin-vue/dist/index.js:4346:12)
      at TransformContext.transform (/private/tmp/foobar/node_modules/@vitejs/plugin-vue/dist/index.js:4665:16)
      at Object.transform (/private/tmp/foobar/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44285:53)
      at async transformRequest (/private/tmp/foobar/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:58557:29)
      at async viteTransformMiddleware (/private/tmp/foobar/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:58695:32)

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 78.84 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.13.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Edge: 90.0.818.39
    Firefox: 87.0
    Safari: 14.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.2 => 1.2.2 
    vite: ^2.3.4 => 2.3.4

Used package manager: yarn

[sodatea]

Bug in @vitejs/plugin-vue.

For anyone who's interested in opening a PR:
Should provide parserPlugins argument when calling rewriteDefault

vite/packages/plugin-vue/src/main.ts

Lines 258 to 261 in b6d12f7

	scriptCode = rewriteDefault(script.content, `_sfc_main`)
	}
	} else {
	scriptCode = rewriteDefault(script.content, `_sfc_main`)

parserPlugins can be determined by the logic in https://github.com/vuejs/vue-next/blob/201060717d4498b4b7933bf8a8513866ab9347e4/packages/compiler-sfc/src/compileScript.ts#L109-L111

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.