Preact: Compatiblity of PreactX alpha 0 with Preact.Router

[janbaer]

I just tried to migrate my Preact app to Preact X, but it's crashing when it's starting. Should it run with the Preact router, or is there any known incompatibility?

util.js:69 Uncaught TypeError: Cannot read property 'replace' of undefined
    at segmentize (util.js:69)
    at rank (util.js:77)
    at rankChild (util.js:81)
    at prepareVNodeForRanking (util.js:64)
    at Array.filter (<anonymous>)
    at Router.getMatchingChildren (index.js:213)
    at Router.render (index.js:231)
    at _ (index.js:126)
    at _ (index.js:137)
    at d (children.js:74)

I use Preact together with Parcel.js for module bundling and with the previous version it was running perfectly.

After the migration I just removed the third parameter from the render function

render(<App />, document.body)

Instead of using document.body I also tried to use a div inside of the body as root element, but I got the same error as before. I use preact-router in the latest version 2.6.1 and preact-compat v3.18.4

[marvinhagemeister]

It's a known issue. Same with preact-render-to-string. We need to update those libraries for the recent vnode shape changes.

[janbaer]

Okay, thanks, than I have to wait with my migration till then. But thank to all of you in advance for all your efforts to provide us such a great library and alternative to the original React.js

[janbaer]

Is there any known time-frame till when preact-router and also preact-compat will be updated to be compatible with Preact X?

[Kanaye]

Preact X doesn't use preact-compat anymore instead Preact X ships a compat layer in preact/compat.
There is already a WIP PR for updating preact-router developit/preact-router#298

Updating preact-render-to-string shouldn't be that much of a hassle. I might give it a try later if no one has created a PR for it by then.

[janbaer]

I just updated Preact X now to alpha 1 and also the React Router to v3.0.0 but it's still not working:

Uncaught TypeError: Cannot read property 'path' of undefined
    at App.handleRoute (app.js:19)
    at Router.render (index.js:237)
    at _ (index.js:129)
    at _ (index.js:140)
    at d (children.js:74)
    at $ (render.js:17)
    at renderApp (index.js:6)
    at Object.parcelRequire.index.js.preact (index.js:11)
    at newRequire (src.e31bb0bc.js:49)
    at src.e31bb0bc.js:81

The error message has changed. I'm not sure if this is a problem of the Router or Preact or the combination of both.

[cristianbote]

Hey @janbaer, I quickly created this sandbox(https://codesandbox.io/s/6w7y53153z) to check on your issue and I do not get the error you've mentioned.

Can you reproduce it in a codesandbox? That would be really helpful.

[janbaer]

@cristianbote Thanks for the quick response. Will try to reproduce it. By the way, I saw in your CodeSandbox that you not defined h like it was necessary before. Instead you defined Component even you don't used it.

In my project I also migrated to Babel 7 with using a fork of babel-preset-preact (there's still an open PR) which provides support for Babel7. Maybe also this combination is the reason for the problem.

[janbaer]

I just invested a bit more time now to investigate the problem and I found out, that the problem was in my code in the Router.onChange eventhandler. In the previous version I read e.current.attributes, but it seem that this is no longer working. So instead it's now e.current.props.

I looked into the last commits of the preact router, and I found where it was changed:

https://github.com/developit/preact-router/commit/ebbda180a8b8db2d42489cfb1d05ba79a74c15ca#diff-34a6d62af0cf0b784f8444529f3130efR65

After I fixed it, Preact X is now running with my project. Thanks to all contributors to provide us all the new features. Especially React.Fragment and also the Hooks I missed very much.