Newest updates to Async Loader cause error message if App component is in /routes

Do you want to request a feature or report a bug?

A bug

What is the current behaviour?

Currently the following is written to the console in the browser:

Uncaught Error: Undefined component passed to createElement()

You likely forgot to export your component or might have mixed up default and named imports <#text dangerouslySetInnerHTML="[object Object]" />

As far as I can tell, this does not cause any problems in the app, just the error message on every reload.

If the current behaviour is a bug, please provide the steps to reproduce.

Using the default Preact template, move App.js from /components to /routes. Start the dev server and check the console in your browser.

What is the expected behaviour?

That no error is thrown. If I downgrade to 3.0.0-rc.14 or don’t place App.js in /routes everything is fine again.

Please mention other relevant information.

If there’s an actual reason why App.js needs to be outside of /routes I can, of course, move it, though it is my personal preference to have it there as I generally think it makes the most sense.

Environment Info:
  System:
    OS: Linux 5.6 Manjaro Linux
    CPU: (4) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 14.3.0 - /usr/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.5 - /usr/bin/npm
  Browsers:
    Firefox: 78.0.1
  npmPackages:
    preact: ^10.3.2 => 10.4.5 
    preact-cli: ^3.0.0-rc.16 => 3.0.0-rc.16 
    preact-render-to-string: ^5.1.4 => 5.1.9 
    preact-router: ^3.2.1 => 3.2.1

[reznord]

If you feel that the components are tend to change often but not app.js, then you can always leave it in src/ which won’t create any issues 🙃

[micahjon]

For what it’s worth, I’ve found I get this same error if Router is top-level and isn’t wrapped in another HTML element (like <div id="preact_root">), e.g.

// app.tsx
const App: FunctionalComponent = () => {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/profile/" component={Profile} user="me" />
      <Route path="/profile/:user" component={Profile} />
      <NotFoundPage default />
    </Router>
  );
};

I’m fairly new to the React ecosystem, so maybe this is obvious, but figured it’d be worth noting in case others were experiencing the same thing.