Web-bugs: wayfarer-weird.glitch.me - see bug description

[jongacnik]

URL: https://wayfarer-weird.glitch.me/
Browser / Version: Firefox 52.0.2
Operating System: Mac OS X 10.11.6
Problem type: Something else - I'll add details below

Steps to Reproduce
Using wayfarer, if the word watch is used as the base route before a partial, the router will break on a TypeError: trie.nodes is undefined, but only in Firefox (52.0.2)

You can see an example of this at the provided url:
https://wayfarer-weird.glitch.me/

Code for example:
https://glitch.com/edit/#!/wayfarer-weird?path=public/client.js

Open this link in Firefox, you'll see the TypeError in the console, any other browser works fine.

Github issue w/ more details: https://github.com/yoshuawuyts/wayfarer/issues/58

_From webcompat.com with ❤️_

[karlcow]

Oh fun issue.
This is happening in
node_modules/wayfarer/trie.js

in

Trie.prototype.create = function (route) {
  assert.equal(typeof route, 'string', 'route should be a string')
  // strip leading '/' and split routes
  var routes = route.replace(/^\//, '').split('/')
  return (function createNode (index, trie) {
    var thisRoute = routes[index]

    if (thisRoute === undefined) return trie

    var node = null
    if (/^:|^\*/.test(thisRoute)) {
      // if node is a name match, set name and append to ':' node
      if (!trie.nodes['$$']) {
        node = { nodes: {} }
        trie.nodes['$$'] = node
      } else {
        node = trie.nodes['$$']
      }

      if (thisRoute[0] === '*') {
        trie.wildcard = true
      }

      trie.name = thisRoute.replace(/^:|^\*/, '')
    } else if (!trie.nodes[thisRoute]) {
      node = { nodes: {} }
      trie.nodes[thisRoute] = node
    } else {
      node = trie.nodes[thisRoute]
    }

    // we must recurse deeper
    return createNode(index + 1, node)
  })(0, this.trie)
}

When thisRoute is "watch"

Firefox has a watch object.

It was mentioned previously

• https://github.com/aurelia/router/issues/315
• https://github.com/angular-ui/ui-router/issues/511

[karlcow]

@miketaylr or @wisniewskit to finish it? :)

[karlcow]

Ahah and also https://github.com/janl/mustache.js/issues/442

[wisniewskit]

This looks like a job for hasOwnProperty. That is, changing this line:

} else if (!trie.nodes[thisRoute]) {

To this:

} else if (!trie.nodes.hasOwnProperty(thisRoute)) {

This should prevent other potential built-in things from clashing as well, like unwatch. Of course, I can't be sure if they would have to change other parts of their code, but it looks like it might be enough.

[miketaylr]

Yeah, this is classic conflict with own properties and inherited props (Object.prototype.watch, a Firefox-specific thing in this case).

[miketaylr]

@jongacnik can you open a bug against https://github.com/yoshuawuyts/wayfarer ?

cc @yoshuawuyts

[yoshuawuyts]

The reference issue is here https://github.com/yoshuawuyts/wayfarer/issues/58

[yoshuawuyts]

Put out a patch to resolve this - thanks heaps everyone for tracking this down! :sparkles:

[miketaylr]

Thank you @yoshuawuyts! Let's close here.