Vue 3: "v-else" conditional compilation error in Pug template (SFC)

[npulidom]

🐛 bug report

Compile a simple Vue 3 app with Parcel 2 (watch mode) and use a v-if and v-else conditional statement in a Pug template, Vue Transformer will output a parse error.

Single File Component Example:

<template lang="pug">

.wrapper

	p(v-if="false") foo
	p(v-else) bug

</template>

Error:

@parcel/transformer-vue: Error parsing JavaScript expression: Unexpected token (1:3)

Also I noticed, using instead v-else="" the template compiles successfully.

🎛 Configuration (.babelrc, package.json, cli command)

{
	"name": "vue-parcel",
	"description": "Simple boilerplate for building static SPA's with VueJs 3.",
	"license": "UNLICENSED",
	"main": "app/app.js",
	"repository": "https://github.com/npulidom/vue-parcel",
	"scripts": {
		"watch": "rm -rf dist && parcel app/index.pug --dist-dir dist --cache-dir .parcel --no-source-maps",
		"build": "rm -rf dist && parcel build app/index.pug --dist-dir dist --cache-dir .parcel --no-source-maps --detailed-report 20",
		"clean": "rm -rf dist .parcel"
	},
	"browserslist": "> 0.5%, last 2 versions, not dead",
	"devDependencies": {
		"@parcel/config-default": "~2.3.2",
		"@parcel/core": "~2.3.2",
		"@parcel/optimizer-cssnano": "~2.3.2",
		"@parcel/transformer-pug": "~2.3.2",
		"@parcel/transformer-stylus": "~2.3.2",
		"@parcel/transformer-vue": "~2.3.2",
		"@vue/component-compiler-utils": "~3.3.0",
		"autoprefixer": "~10.4.2",
		"cssnano": "~5.0.17",
		"parcel-resolver-vue3-runtime": "~2.0.2",
		"postcss": "~8.4.6",
		"pug": "~3.0.2",
		"stylus": "~0.57.0"
	},
	"dependencies": {
		"modern-normalize": "~1.1.0",
		"vue": "~3.2.31",
		"vue-router": "~4.0.12",
		"vuex": "~4.0.2"
	}
}

🤔 Expected Behavior

Vue Transformer should support v-else in Pug templates.

😯 Current Behavior

Compilation Error

🚨 Build failed.

@parcel/transformer-vue: Error parsing JavaScript expression: Unexpected token (1:3)

SyntaxError: Error parsing JavaScript expression: Unexpected token (1:3)

💁 Possible Solution

Check v-else statement in pug template of SFCs.

🔦 Context

Compile a simple Vue 3 application using a Pug template in a SFC.

💻 Code Sample

Simple reproduction here.

🌍 Your Environment

Software	Version(s)
Parcel	2.3.2
Node	14.18.1
npm/Yarn	yarn 1.22.17
Operating System	Manjaro Linux

[Jengamon]

Found the error source

parcel/packages/transformers/vue/src/VueTransformer.js

Line 224 in 851480d

content = await preprocessor.render(content, {});

Because Vue templates are a partial, pug doesn't make any assumption of the doctype, so it will mirror the attribute.

Because of this, you will end up with the attribute v-else="v-else", which will error (idk where).

If you specify doctype: "html" in the options argument of the line above, pug will know not to mirror the attribute, but this would lock in Parcel's pug output to HTML5 (which I'm not sure is an argument at this point, but idk).

[Jengamon]

Ok, so I PR'd the fix, because pug will prefer a doctype declared in a template over the doctype declared in options, so if you ever want to break this example again, it would take explicit effort, by manually making the example HTML 4 or something with a doctype declaration. (I think HTML5 only as restrictive, but HTML5 by default as quite reasonable given the web landscape of today.)

[npulidom]

Thanks @Jengamon! hope this PR fix will be included in the next release