vue-loader error with script setup: Cannot read property 'content' of null

[lsdsjy]

Version

2.7.0-beta.8

Reproduction link

github.com

Steps to reproduce

yarn && yarn build

What is expected?

Build succeeds.

What is actually happening?

error  in ./src/App.vue?vue&type=script&setup=true&lang=ts&
Cannot read property 'content' of null

---

As shown in the reproduction repo, the problem occurs on a very specific condition:

1. <script setup lang="ts">
2. import
3. : in a string and ; in event handler

[yyx990803]

This seems to be caused by an outdated version of eslint-plugin-vue. Please update it to the latest version.

[lsdsjy]

I've tried update eslint-plugin-vue to the latest version(9.1.1) and the problem remains. See lsdsjy/vue-template-handler-bug-reprod@814d1b1

[lsdsjy]

I think it's caused by https://github.com/vuejs/vue/blob/main/packages/compiler-sfc/src/compileScript.ts#L1838

Event handler like $emit('update:a'); is recognized as a TypeScript type annotation syntax and passed to babelParser.parseExpression, which caused an error because it's a statement not an expression.

A possible fix is #12594 , which strips the strings in the code before detecting type syntax.

And I've found that Vue3 has the same problem. I think the fix can be ported to vuejs/core too.