preactjs / preact-router

:earth_americas: URL router for Preact.
http://npm.im/preact-router
MIT License
1.02k stars 155 forks source link

Can't make preact-router work with preact-x lazy #324

Closed JohnForster closed 5 years ago

JohnForster commented 5 years ago

I am trying to get preact-router to work with lazy and suspsense in preact-x but it's throwing the error:

Uncaught TypeError: Cannot read property 'replace' of undefined
    at tt (preact-router.es.js:70)
    at preact-router.es.js:78
    at Y (preact-router.es.js:65)
    at Array.filter (<anonymous>)
    at e.getMatchingChildren (preact-router.es.js:301)
    at e.render (preact-router.es.js:323)
    at x (preact.module.js:1)
    at k (preact.module.js:1)
    at x (preact.module.js:1)
    at k (preact.module.js:1)

This is my app.tsx file:

import {Component, h} from 'preact'
import {lazy, Suspense} from 'preact/compat'
import Router from 'preact-router'

const SomeRoute = lazy(() =>  import('./someRoute'))

export default class App extends Component {
  render(props,state) {
    return (
      <Router>
        <Suspense fallback={<h1>loading...</h1>}>
          <SomeRoute path='/' message='Hello world'/>
        </Suspense>
      </Router>
    )
  }
}

Small example project can be found here. Even smaller codesandbox here: https://codesandbox.io/s/keen-mendel-8jm91

oscartbeaumont commented 5 years ago

Have you been able to fix this?

oscartbeaumont commented 5 years ago

I managed to get the code working by moving <Suspense> outside the <Router> like below.

import {Component, h} from 'preact'
import {lazy, Suspense} from 'preact/compat'
import Router from 'preact-router'

const SomeRoute = lazy(() =>  import('./someRoute'))

export default class App extends Component {
  render(props,state) {
    return (
      <Suspense fallback={<h1>loading...</h1>}>
          <Router>
           <SomeRoute path='/' message='Hello world'/>
         </Router>
      </Suspense>
    )
  }
}