Filters no longer work since 3.4.0-alpha.4 (@vue/compat) #10852
Description
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.4version of bothvueand@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.