Filters no longer work since 3.4.0-alpha.4 (@vue/compat)

[andreww2012]

Vue version

3.4.0-alpha.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ltjj9g

Steps to reproduce

• In 3.4.0-alpha.3, filters are working fine. This is the version installed by default in the reproduction repo.
• Install 3.4.0-alpha.4 version of both vue and @vue/compat, and the invalid JS code will be generated for every filter usage (extra closing parenthesis is generated I believe).

I actually digged a little bit further and found an exact commit after which the issue started to happen: 53aaa1e (found it using binary search on these commits: v3.4.0-alpha.3...v3.4.0-alpha.4)

What is expected?

No compilation errors should occur.

What is actually happening?

Compilation errors occur if at least one filter is used.

This is an excerpt from the generated code that shows the aforementioned parenthesis mismatch:

6  |    const _filter_formatDate = _resolveFilter("formatDate")
7  |    return (_openBlock(), _createElementBlock("div", null, " Today is " + _toDisplayString(_filDateforma_ctx.formatDateDate())), 1 /* TEXT */))
8  |  }
   |  ^
9  |  
10 |

For search purposes I'll attach the stack trace I'm getting with webpack 5:

ERROR in ./src/App.vue?vue&type=template&id=7ba5bd90 (./node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/babel-loader/lib/index.js??clonedRuleSet-42.use[0]!./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=template&id=7ba5bd90)
Module build failed (from ./node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\***\src\App.vue: Missing semicolon. (6:122)

  4 |
  5 |   const _filter_dFormat = _resolveFilter("dFormat")
> 6 |   return (_openBlock(), _createElementBlock("div", null, _toDisplayString(_filDatedForm_ctx.dFormatDate())), 1 /* TEXT */))
    |                                                                                                                           ^
  7 | }
    at constructor (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:354:19)
    at JSXParserMixin.raise (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:3278:19)
    at JSXParserMixin.semicolon (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:3599:10)
    at JSXParserMixin.parseReturnStatement (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12621:12)
    at JSXParserMixin.parseStatementContent (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12271:21)
    at JSXParserMixin.parseStatementLike (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12240:17)
    at JSXParserMixin.parseStatementListItem (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12220:17)
    at JSXParserMixin.parseBlockOrModuleBlockBody (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12797:61)
    at JSXParserMixin.parseBlockBody (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12790:10)
    at JSXParserMixin.parseBlock (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12778:10)
    at JSXParserMixin.parseFunctionBody (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:11617:24)
    at JSXParserMixin.parseFunctionBodyAndFinish (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:11603:10)
    at C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12920:12
    at JSXParserMixin.withSmartMixTopicForbiddingContext (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:11914:14)
    at JSXParserMixin.parseFunction (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12919:10)
    at JSXParserMixin.parseFunctionStatement (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12603:17)
    at JSXParserMixin.parseStatementContent (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12264:21)
    at JSXParserMixin.parseStatementLike (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12240:17)
    at JSXParserMixin.parseStatementListItem (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12220:17)
    at JSXParserMixin.parseExportDeclaration (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13397:17)
    at JSXParserMixin.maybeParseExportDeclaration (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13356:31)
    at JSXParserMixin.parseExport (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13283:29)
    at JSXParserMixin.parseStatementContent (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12353:27)
    at JSXParserMixin.parseStatementLike (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12240:17)
    at JSXParserMixin.parseModuleItem (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12217:17)
    at JSXParserMixin.parseBlockOrModuleBlockBody (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12797:36)
    at JSXParserMixin.parseBlockBody (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12790:10)
    at JSXParserMixin.parseProgram (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12117:10)
    at JSXParserMixin.parseTopLevel (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:12107:25)
    at JSXParserMixin.parse (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13906:10)
    at parse (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:13927:26)
    at parser (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\core\lib\parser\index.js:41:34)
    at parser.next (<anonymous>)
    at normalizeFile (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\core\lib\transformation\normalize-file.js:64:37)
    at normalizeFile.next (<anonymous>)
    at run (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\core\lib\transformation\index.js:21:50)
    at run.next (<anonymous>)
    at transform (C:\Users\***\node_modules\.pnpm\@[email protected]\node_modules\@babel\core\lib\transform.js:22:33)
    at transform.next (<anonymous>)
    at step (C:\Users\***\node_modules\.pnpm\[email protected]\node_modules\gensync\index.js:261:32)
    at C:\Users\***\node_modules\.pnpm\[email protected]\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (C:\Users\***\node_modules\.pnpm\[email protected]\node_modules\gensync\index.js:223:11)
 @ ./src/App.vue?vue&type=template&id=7ba5bd90 1:0-531 1:0-531
 @ ./src/App.vue 1:0-64 5:68-74 16:63-19:3 18:29-35 16:2-19:4
 @ ./src/main.js 99:0-28 206:17-

System Info

No response

Any additional comments?

This happened when I started porting to Vue 3 a big quite old project following the instructions provided in @vue/compat README.

[haoqunjiang]

I actually digged a little bit further and found an exact commit after which the issue started to happen: 53aaa1e (found it using binary search on these commits: v3.4.0-alpha.3...v3.4.0-alpha.4)

I think it's actually caused by #9729