Dynamic imports

[remix-run]

Dynamic imports

[lkostrowski]

Sometimes its perf reason (loading when its needed), sometimes its just a must.
I struggle to implement Leaflet maps in Remix now, I definitely need something like next's dynamic() or react lazy, otherwise its hacking. Some libraries are unsafely trying to access DOM...

[jacob-ebey]

You can currently do Client Only dynamic component imports with the following pattern:

import { Suspense, lazy, useEffect, useState } from "react";
import type { ReactNode } from "react";

let LazyImported = lazy(() => import("./lazy-comp"));

export function ClientOnly({ children }: { children: ReactNode }) {
  let [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  return mounted ? <>{children}</> : null;
}

export default RouteComponent() {
  return (
    <h1>YAY!</h1>
    <ClientOnly>
      <Suspense fallback="">
        <LazyImported />
      </Suspense>
    </ClientOnly>
  );
}

[lkostrowski]

Thanks @jacob-ebey , it work indeed, but its a hacky way. I assume it will be gone when React 18 and SSR suspense is shipped.

What is worth to mention IMO is

1. Add this to the documentation. There are plenty of examples how to do it in Next and Remix is sort of more high level Next alternative. I think problems with SSR/hydration is one of the biggest challenges for devs
2. Dynamic imports require TS to set a valid module flag in tsconfig. For me it works with es2022 but I can't be sure if I'm not breaking Remix internal builds right now

Regarding initial issue by Ryan, my opinion is to use native React way (lazy and suspense) without re-exporting it, but ensure internal build system is configured well to support it

[k1sul1]

Dynamic imports require TS to set a valid module flag in tsconfig

Dynamic imports seem to work just fine with "module": "es6" in tsconfig even though TS complains about the availability.

Older browsers probably break entirely but that's to be expected with ES6. Changing module to something else is bound to break newish browsers, like Safari from last "good' MacOS version, so that isn't really an option?

Would be nice if there was some sort of official guidance on the subject. I was able to implement a lazy loading admin overlay, but I'm a bit afraid for it's longevity.

[jacob-ebey]

tsconfig isn't really used and there's nothing you configure there that will break how remix complies your code currently. Don't worry about changing it, especially when it's to include a config for language settings you are trying to use such as dynamic import. Anything you can do today such as putting suspense behind a client only won't break in the future as react is only adding the ability for the server to use this, not removing anything. Don't worry about "longevity" in terms of things breaking around the pattern I've outlined above. And I wouldn't call it hacky, it's literally how you delay execution for client only using state in React. Nothing strange about it.

As for a "dynamic" component, React.lazy will essentially become this when 18 drops, but I'm skeptical about implementing it today as every version of it will be a combo of the compiler turning async imports into sync imports for the server, and "hacks" for the client around delaying hydration until these chunks have loaded to avoid hydration issues. This means we'd have to expose some sort of "waitTillDynamicHasLoaded()" you have to call in your entry.client, or hide this away very hacky under the hood. I don't think this is worth it currently.

[k1sul1]

Thanks for the clarification! I can get rid of // @ts-expect-error comments by just switching the module flag. I had gotten a bit of misinformation from somewhere, thinking things would break in the future.