Function passed to getComponent is never called

[devmattrick]

Hi!

I have a very basic setup as follows:

import { h, render } from "preact";
import AsyncRoute from "preact-async-route";
import Router from "preact-router";

import Index from "./pages/Index";

function getTest() {
  console.log("test");

  return import("./pages/Test").then(module => module.default);
}

const App = () => (
  <Router>
    <Index path="/" />
    <AsyncRoute path="/test" getComponent={getTest} />
  </Router>
);

render(App(), document.body);

When I try to navigate to /test, however, it simply renders <undefined path="/" url="/"></undefined>, instead of the expected component. I've also noticed that the console.log statement is never called. There are no errors at compile time or in the console at runtime.

If you need anything else, please let me know!

[daricvn]

I got the same problem here,
Even though I copied their example but it doesn't work either.

[prateekbh]

Sorry for the late reply was a bit occupied
I tried your code above... seems to be working fine:

https://codesandbox.io/s/gifted-buck-edzwo

[devmattrick]

I don't think I have the code I was working on still, but I'll try to see if I can reproduce the issue and if so I'll post the repo here.

[devmattrick]

I haven't been able to find a way to reproduce it, I initially thought the issue may be with Preact X, but it doesn't seem to be causing any problems. Maybe @daricvn would be willing to share their code, otherwise it's probably fine to close this issue.

[prateekbh]

Also Preact X has lazy. you dont even need this.