Router: TypeError: Cannot convert a Symbol value to a string when using React.lazy

[maieonbrix]

Hello !

I am using create-react-app.
Here are my dependencies :

"dependencies": {
    "@reach/router": "1.2.1",
    "react": "16.7.0",
    "react-dom": "16.7.0",
    "react-scripts": "2.0.3"
  }

I am getting an error when using React.lazy with reach/router.

Here is a link to the buggy code within a codesandbox : https://codesandbox.io/s/2zy8p8w070
or my github : https://github.com/maieonbrix/reach-router-bug-repro

or you can see it here :

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { Router } from "@reach/router";

import "./styles.css";

const Home = React.lazy(() => import("./Home"));

function App() {
  return (
    <div className="App">
      <Router>
        <Suspense fallback={<div>loading...</div>}>
          <Home exact path="/" component={Home} />
        </Suspense>
      </Router>
    </div>
  );
}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

I am getting this error :

Thank you for such a great package Ryan !

[sseppola]

I suspect you cannot use the Suspense component as a direct child of Router.

Instead you can do like this:

function createLazyRoute<T extends RouteComponentProps>(
  RouteComponent: React.ComponentType<T>
) {
  return function(props: T) {
    return (
      <React.Suspense fallback={<Loader />}>
        <RouteComponent {...props} />
      </React.Suspense>
    );
  };
}

const AsyncSettingsRoute = createLazyRoute(
  React.lazy(() => import('./modules/viewer/routes/SettingsRoute'))
);

Hope that helps.

[maieonbrix]

Clever ! It seems indeed to be the issue, I didn't read the highlighted error (in red) only the Cannot convert Symbol thing ... maybe it's worth to add this in the doc ?

Or maybe I should never lazily import a Route component but only the sub-components that its containing.. (and add this also to the doc maybe ?)

What do you think @ryanflorence ? I could work on it :)

Thank you for your time @sseppola :)

[sseppola]

No problem, happy to help :)
I don't know if/how this should be handled by the router, but I'm sure @ryanflorence has more insight into that. For now we'll have to handle it ourselves and be patient with suspense integrations, it is very new after all :)

[chiefcll]

Can this be reopened? Will Reach router ever support Suspense out of the box? I'd like to avoid wrapping my components...