Snowpack and @loadable/component

[tcchau]

Hi, all:

I've been trying to migrate our existing CRA project to Snowpack and have now run into a problem which solution is not obvious. We use @loadable/component to code split. Whenever we try to load a dynamically imported component we run into trouble in React Router and we get this error while running in dev:

Uncaught Invariant Violation: The root route must render a single element

The relevant code snippet is:

const PrivacyPolicy = loadableComponent(() => import('./PrivacyPolicy'));

and

<Route path='privacyPolicy' component={PrivacyPolicy} />

From what I can tell, dynamic imports are supported in Snowpack so I'm not sure what's causing this problem without delving into this some more. I just wanted to canvas the community to see if anyone already knows the answer.

We're using React 16.x, and React Router 3 -- we've been putting off migrating as it's going to be a big job.

Thanks in advance.

[stolinski]

I know this isn't a good solution, but we ended up going with React Suspense / Lazy for this instead of loadable components because we weren't using SSR>

[tcchau]

Thanks @stolinski for the suggestion. I'm going to re-write a few of the routes using React.lazy this weekend and see if I can make it work. Like many others, rebuild times on our large-ish project was taking a bit too much time in development mode. Replacing webpack with esbuild sped things up a bit, but not as much as I thought it would so I decided to give snowpack a try. Still holding out hope that we can get this working and see some improvement in our developer experience.