Dynamic imports

[ryanflorence]

Do they work?

Maybe I don't want Firebase imported until they actually click the button.

let firebase = null;
function SigninButton() {
  return (
    <button
      onClick={async () => {
        if (!firebase) {
          firebase = await import("../firebase");
        }
        firebase.signInWithPopup();
      }}
    >
      Log in
    </button>
  );
}

Do we want our own React.lazy that code splits and server renders?

import { lazy } from "@remix-run/react";

let HugeModal = lazy(
  () => import("../HugeModal"),
  () => <LoadingSkeleton />
);

<HugeModal/>

[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...

[henriqueup]

I might be late to the party, but did you manage to get Leaflet maps working in Remix?
Still struggling on this even with React 18's lazy/Suspense

[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.

[HosseinAgha]

Looks like using React lazy according to what Ryan explained above is working in React 18 with server-side suspense.
So I guess the remix has no plan to release a lazy utility anymore? Am I right?

[sergiodxa]

Yeah I think it’s not needed anymore since the React one works.

[rajeshdavidbabu]

Whats the status here, I would like to load an .mdx file dynamically, how would I do it ? I am doing something similar, but I see the "Loading..." flashing twice.

import React, { lazy, Suspense } from "react";

let HelloWorldMDX = lazy(async () => {

 const string = "hello-world"; // this will be dynamic
  const module = await import("~/blogPosts/hello-world.mdx");

  return { default: module.default };
});

const MemoizedMDX = React.memo(HelloWorldMDX);

const HelloWorld = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
         <MemoizedMDX />
      </Suspense>
    </div>
  );
};

export default HelloWorld;

[dwjohnston]

@ryanflorence Dynamic Imports appear not to work.

Here's my investigation.

Remix 1.9.3

This commit: dwjohnston/remix-app-1-dynamic-imports@cbd1079

Is a remix@1.9.3 app scaffolded with create-remix.

We try to do a dynamic import like this:

export const loader = async (loaderInput: LoaderArgs) => {
    const pathname = loaderInput.params["*"];
    const result = await import(`../app/json/${pathname}.json`);
    return result;
}

export default function () {
    return <div>Whatever</div>
}

And get a server error:

TypeError: Module "file:///Users/davidjohnston/git-workspace/remix-dynamic-imports/app/json/foo.json" needs an import assertion of type "json"

I can add that import assertion: dwjohnston/remix-app-1-dynamic-imports@7490068

But now we get:

✘ [ERROR] /Users/davidjohnston/git-workspace/remix-dynamic-imports/app/routes/$.tsx: Support for the experimental syntax 'importAttributes' isn't currently enabled (16:90):

  14 |
  15 |     const pathname = loaderInput.params["*"];
> 16 |     const result = await import(`../app/json/${pathname}.json`, {assert: {type: "json"}}); 
     |                                                                                          ^
  17 |
  18 |     
  19 |     return result;

Add @babel/plugin-syntax-import-attributes (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-attributes) to the 'plugins' section of your Babel config to enable parsing. [plugin remix-hmr]

I investigated how we configure babel plugins, but I get to this issue: #2278 telling us that Remix uses esbuild and not babel, and it's not possible to configure esbuild.

Remix 2.3.0

Same problem with Remix@2.

Without import type assertion: dwjohnston/remix-2-dynamic-imports@d99c5ab

With import type assertion: dwjohnston/remix-2-dynamic-imports@e7d7674

[JannikWempe]

Did you find any solution to this?
I am in the exact same situation...

[dwjohnston]

@JannikWempe nope!

I ended up at build time generating a barrel file like

export {default as foo} from "foo.json"; 
export {default as bar} from "bar.json"; 

And then using these like:

import * as allJsons from "./theBarrelFile"; 

export const loader = async (loaderInput: LoaderArgs) => {
    const pathname = loaderInput.params["*"];
    const result = allJsons[pathName]
    return result;
}

[rajeshdavidbabu]

I just ended up here. I think Vite might solve this one ?

[jonkwheeler]

Do we want our own React.lazy that code splits and server renders?

Yes. Was this never implemented? Kind of a big deal if you want to create a page builder from a CMS.

[sergiodxa]

React.lazy works, and with React v18 it can also SSR, so no need from Remix to have a custom implementation.