Parsing error with SVG <use> with xlink:href attribute

[benjarwar]

Tell us about your environment

• ESLint Version: 4.1.1
• eslint-plugin-vue Version: 3.1.3
• Node Version: 6.9.2

Please show your full configuration:

env:
  browser: true
  es6: true
extends:
  - eslint:recommended
  - plugin:vue/recommended

What did you do? Please include the actual source code causing the issue.

<template>
  <svg class="icon">
    <use xlink:href="#chevron"></use>
  </svg>
</template>

What did you expect to happen?
xlink:href attributes shouldn't cause parsing errors. We are using an SVG sprite built with gulp-svg-sprite for our iconography; this attribute refers to the icon's ID.

What actually happened? Please include the actual, raw output from ESLint.
Received the following Parsing error:

  0:0  error  Parsing error: Cannot read property 'startOffset' of undefined

The error disappears upon removal of the xlink:href attribute.

[benjarwar]

Also, I'm trying to silence the rule for now, but doesn't seem like I can override it. Do I need to avoid extending plugin:vue/recommended and add each rule manually for now?

Tried this in .eslintrc.yml:

env:
  browser: true
  es6: true
extends:
  - eslint:recommended
  - plugin:vue/recommended
rules:
  vue/no-parsing-error: 0

[benjarwar]

TIL xlink:href is deprecated. Using href instead clears up the parsing error.

[benjarwar]

Sorry, did a deeper browser test. Safari (at least) still requires xlink:href. Reopening.

[michalsnik]

Alright @benjarwar , looks like it might be problem with vue-eslint-parser https://github.com/mysticatea/vue-eslint-parser/blob/b954bee331fa38be86b3db4bf88b599c0ed4dbbe/lib/transform-html.js#L529

const name is evaluated to href, but node.__location.attrs contains key xlink:href, so not surprisingly attrLocs[name] returns undefined. Thus your error Cannot read property 'startOffset' of undefined.

@mysticatea maybe you can say more about it, or rather if we can fix it in vue-eslint-parser itself. Won't it cause any unexpected issues with other attributes like v-bind:key and so on?

[michalsnik]

It happens too for attributes that are case-sensitive like viewBox (See #51).
__location.attrs contains normalized keys, but attribute names stay the same.

[benjarwar]

@michalsnik @mysticatea ah, thanks for the insight. It looks like the attr object contains a prefix value. Would need to dig further, but I'm guessing there's a split on the : somewhere?

The first half is stored as a prefix value, so perhaps could do this:

const name = attr.prefix ? attr.prefix + ':' + attr.name : attr.name

[michalsnik]

Fixed in v3.2.1 🚀