Vue-loader: error parsing jade template

[roosephu]

Here is an example, with [email protected]

<template lang="pug">
div
  p(v-if="a < 0") foo
  p(v-if="a > 0") bar
</template>

<script lang="livescript">
module.exports = 
  data: ->
    a: 1
</script>

Error:

Module build failed: Error: Error parsing template:

< 0") foo
  p(v-if="a > 0") bar
</template>

<script lang="livescript">
module.exports = 
  data: ->
    a: 1
</script>
    at parseHTML (/tmp/node_modules/vue-template-compiler/build.js:3399:13)
    at Object.parseComponent (/tmp/node_modules/vue-template-compiler/build.js:5097:3)
    at module.exports (/tmp/node_modules/vue-loader/lib/parser.js:15:21)
    at Object.module.exports (/tmp/node_modules/vue-loader/lib/loader.js:144:15)

My analysis:
Function parseHTML here will keep searching for <. At first it will succeed parsing <template lang="pug">. Then it will find < in a < 0, which results in failure.

To reproduce, clone https://github.com/roosephu/repro and run npm run dev. All changes are made in src/App.vue after creating by vue-cli.

[f0rmiga]

I confirm this. I use a lot of v-show="array.length > 0" in a recent project and it is not compiling. I had to change to v-show="!!array.length" to make it work.

[chmln]

Complex conditionals seem to be a problem for the new vue-loader.

For one, any v-show or v-if containing symbols & < > has to be unescaped manually e.g. v-show!=, which creates inconsistency.

But that's not a blocking issue, unlike this one.
Hopefully it'll be fixed soon, as vue 2 is very promising

[zhaozhuo]

same issue

package.json

---

"jade": "^1.11.0",
"vue": "^2.0.1",
"vue-hot-reload-api": "^2.0.6",
"vue-html-loader": "^1.2.3",
"vue-loader": "^9.5.1",
"vue-style-loader": "^1.0.0",
"vue-validator": "^2.1.7",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2",
"webpack-stream": "^3.2.0",

change file "node_modules/jade/lib/runtime.js" line 120 "jade_encode_html_rules = {}" can pass

[yyx990803]

Update Vue to 2.0.3 and re-install vue-loader should resolve this now.

[zhaozhuo]

@yyx990803

I'm sorry, still not.

---

package.json

"vue": "^2.0.3",
"vue-loader": "^9.7.0",
"vue-template-compiler": "^2.0.3",
"vue-template-es2015-compiler": "^1.0.0",
"vue-validator": "^2.1.7",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2",
"webpack-stream": "^3.2.0",
"yargs": "^6.0.0"

[yyx990803]

@28240885 sorry, this was fixed in a commit after 2.0.3... will be released soon.

[solidevolution]

Doesn't work. Jade/Pug with vue-loader 9.* is incompatible

[yyx990803]

@solidevolution tested in a fresh install from vue-cli and it works properly with pug, including the < character. If you have problems, please open a separate issue with detailed information of your setup.