Error after upgrading to Preact 8

[eduardoboucas]

After updating Preact to 8.1.0 (I was on 6!), I'm seeing this error:

preact-router.es.js?b6d5:58 Uncaught TypeError: Cannot read property 'attributes' of null
    at pathRankSort (eval at <anonymous> (http://localhost:3000/bundle.js:148:1), <anonymous>:67:12)
    at Array.sort (native)
    at Router.getMatchingChildren (eval at <anonymous> (http://localhost:3000/bundle.js:148:1), <anonymous>:304:27)
    at Router.render (eval at <anonymous> (http://localhost:3000/bundle.js:148:1), <anonymous>:325:21)
    at renderComponent (eval at <anonymous> (http://localhost:3000/bundle.js:73:1), <anonymous>:263:38)
    at renderComponent (eval at <anonymous> (http://localhost:3000/bundle.js:73:1), <anonymous>:275:25)
    at renderComponent (eval at <anonymous> (http://localhost:3000/bundle.js:73:1), <anonymous>:275:25)
    at renderComponent (eval at <anonymous> (http://localhost:3000/bundle.js:73:1), <anonymous>:275:25)
    at setComponentProps (eval at <anonymous> (http://localhost:3000/bundle.js:73:1), <anonymous>:244:103)
    at buildComponentFromVNode (eval at <anonymous> (http://localhost:3000/bundle.js:73:1), <anonymous>:331:13)
pathRankSort @ preact-router.es.js?b6d5:58
getMatchingChildren @ preact-router.es.js?b6d5:295
render @ preact-router.es.js?b6d5:316
renderComponent @ VM2730:263
renderComponent @ VM2730:275
renderComponent @ VM2730:275
renderComponent @ VM2730:275
setComponentProps @ VM2730:244
buildComponentFromVNode @ VM2730:331
idiff @ VM2730:134
diff @ VM2730:110
render @ VM2730:363
(anonymous) @ index.jsx?a49b:25
(anonymous) @ bundle.js:873
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:66
(anonymous) @ bundle.js:69

I'm using version 2.5.1 of preact-router. Has anyone seen this issue before?

Thanks!

[eduardoboucas]

I noticed that this is only an issue when adding conditional rules. This works:

return (
  <Router history={history}>
    <HomeView path="/" authenticate />
  </Router>
)

This doesn't:

return (
  <Router history={history}>
    {condition &&
        <HomeView path="/" authenticate />
    }
  </Router>
)

Not really an issue as I can get around that on my app, so feel free to close, but here it is in case someone else faces the same problem.

[t47io]

I've seen this Uncaught TypeError: Cannot read property 'attributes' of null with preact 8.1.0 on other packages (react-tooltip), but not with my usage of preact-router so far. @eduardoboucas

[developit]

Hmm. That should have been fixed by c4ee6c8. Must have missed a case.

[monalv]

with preact 8.1 https://github.com/developit/preact/issues/751 it tends to have unexpected children, which is causing the vNode here to be null/undefined https://github.com/developit/preact-router/blob/master/src/index.js#L215 which in turn causes the error mentioned above.

There is no fix for that yet. the link pasted above https://github.com/developit/preact-router/commit/c4ee6c8829af89d7d57c437a05c022d3055dca41 does not fix it since it accesses vNode.attributes > null.attributes

[RikuVan]

Can someone suggest a work-around for not rendering/hiding routes until this issue is resolved.

[Ninerian]

One solution would be to save the routes into an array and concat them on the condition.

const routesA = [
	(<PageA ...>),
	(<PageB ...>)
];

const routesB = [
	(<PageC ...>)
];

const routes = routeBAllowed ? routesA.concat(routesB) : routesA;

<Router>
	{...routes}
</Router>