Router: Preact Support?

[JayKan]

Are there any examples on how to integrate with Preact + SSR?

[Kocisov]

It works with preact-compat you just replace react as preact-compat in webpack (or any bundler really)

import { Component } from 'preact'
import { Router } from '@reach/router'

const Color = () => (
  <div>
    <h2 style={{ color: 'yellow' }}>Yellow</h2>
  </div>
)

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
        <Router>
          <Color path="/" />
        </Router>
      </div>
    )
  }
}

[ryanflorence]

👆what they said :)

[hipstersmoothie]

@ryanflorence I got this working with webpack. But when I set webpack to production mode the build breaks. Example

[hipstersmoothie]

I also am seeing that behavior.
On Fri, Jun 8, 2018 at 10:19 PM Mohajer Farhadpur [e-mail]
wrote:

@Kocisov https://github.com/Kocisov Does that work with the Link
component as well? I get a value is not a function TypeError.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/reach/router/issues/9#issuecomment-395941167, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABIyBCpctlSqjE41VmoG13DFqEyfX7Puks5t61r7gaJpZM4UV-4a
.

[Kocisov]

As I am not using Preact, I pretty much know nothing about this.

Sorry.

[hipstersmoothie]

Info is more for @ryanflorence 😜

[hipstersmoothie]

Confirmed adding these lines to my repo:

const App = () => (
  <div id="foo">
    <span>Hello, world!</span>
    <Link to="/" />
  </div>
);

breaks the development build with this error:

Uncaught TypeError: value is not a function
    at setAccessor (preact.esm.js:262)
    at diffAttributes (preact.esm.js:605)
    at idiff (preact.esm.js:451)
    at diff (preact.esm.js:356)
    at renderComponent (preact.esm.js:777)
    at renderComponent (preact.esm.js:762)
    at renderComponent (preact.esm.js:762)
    at renderComponent (preact.esm.js:762)
    at setComponentProps (preact.esm.js:684)
    at buildComponentFromVNode (preact.esm.js:864)

[ryanflorence]

I’d love to support preact but I won’t be spending time on debugging this, anybody want to dig in?

[ryanflorence]

What happens if you have text in the link?

[developit]

I believe the issue is that there is a value property on anchorProps here, which is then being applied to the <a> erroneously:
https://github.com/reach/router/blob/7d0cf57e73cb4fd5043e8fd0ddeb387dd886c3f7/src/index.js#L372

[developit]

Ah nevermind, it's refs. react-create-ref doesn't work with Preact right now I guess.

[developit]

Alright, I just implemented createRef in preact (core):
https://github.com/developit/preact/pull/1138

If that lands, all is well. Otherwise we'll add it to preact-compat since reach/router requires compat anyway.

[developit]

(note: replying to a deleted comment lol)

I guess that's part of it, but really it's that create-react-ref returns an object, which when passed as <foo ref={ {} } /> is not currently supported in Preact. That feature of React was only released in the most recent version, and we're still working out whether it's something that should be in Preact's core, or in compat.

[ryanflorence]

This project doesn’t use createRef directly, is it happening indirectly or is this just a problem for the app using it? Closing unless there’s an action item here. Thanks!

[AlexGalays]

Does it work now? :)

[alexkhismatulin]

Does it work now? :)

Yeah, check it out in sandbox mentioned above by installing new version of preact: https://codesandbox.io/s/9jpv93q9nr