Uncaught SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.

[stephenhowells]

Using Vue 1.0.11 and vue-router 0.7.7 Chrome inspector throws this error when trying to access a route when clicking on a link generated by v-link:

Uncaught SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.

Reverting back to 1.0.10 makes the route work and no errors are displayed in inspector.

[yyx990803]

Can you also post the error stack please.

[stephenhowells]

Sure:

Uncaught SyntaxError: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.

addClass @ users-7cf1435490.js:5466
handleObject @ users-7cf1435490.js:10265
update @ users-7cf1435490.js:10249
Directive._bind @ users-7cf1435490.js:11900
linkAndCapture @ users-7cf1435490.js:10565
compositeLinkFn @ users-7cf1435490.js:10543
Vue._compile @ users-7cf1435490.js:12144
Vue.$mount @ users-7cf1435490.js:13108
Vue._init @ users-7cf1435490.js:6596
Vue._init @ users-7cf1435490.js:3358
VueComponent @ VM4924:2
build @ users-7cf1435490.js:10113
activate @ users-7cf1435490.js:2826
(anonymous function) @ users-7cf1435490.js:3119
step @ users-7cf1435490.js:3142
(anonymous function) @ users-7cf1435490.js:3145
deactivate @ users-7cf1435490.js:2756
step @ users-7cf1435490.js:3144
runQueue @ users-7cf1435490.js:3139
(anonymous function) @ users-7cf1435490.js:3103
step @ users-7cf1435490.js:3142
(anonymous function) @ users-7cf1435490.js:3145
next @ users-7cf1435490.js:3208
(anonymous function) @ users-7cf1435490.js:13951
j @ jquery.js:3099
k.fireWith @ jquery.js:3211
x @ jquery.js:8264
(anonymous function) @ jquery.js:8605

It seems to be complaining about this function:

/**
 * Add class with compatibility for IE & SVG
 *
 * @param {Element} el
 * @param {String} cls
 */

function addClass(el, cls) {
  if (el.classList) {
    el.classList.add(cls);
  } else {
    var cur = ' ' + (el.getAttribute('class') || '') + ' ';
    if (cur.indexOf(' ' + cls + ' ') < 0) {
      setClass(el, (cur + cls).trim());
    }
  }
}

[stephenhowells]

I should state I'm on OS X 10.11.2 with Chrome Version 47.0.2526.80 (64-bit).

[ikristher]

I also face the same error but with different implementation:

here is my button.vue

<template>
    <button type='button' class="raised-button small ink"><i class="fa fa-search"></i> {{label}}</button>
</template>

<script type="text/babel">
    export default{
        props:[ 'label']

    }
</script>

[stephenhowells]

with Vue 1.0.13 and router 0.7.7 this bug has been resolved 👍