Remix equivalent to next/dynamic?

[SpeedyCraftah]

I have a client-sided react library I want to import which cannot be rendered on the server (the HTML editor react-draft-wysiwyg).
Is there an alternative to the next.js dynamic function? Or maybe another workaround?

[kiliman]

Checkout remix-utils <ClientOnly/>

https://github.com/sergiodxa/remix-utils#clientonly

[kiliman]

Looks like the package has a side-effect that is causing the package to be included in the server bundle. Create a file named react-draft-wysiwyg.client.ts that simply re-exports everything from that package. Also you should use the children render prop to ensure it works correctly.

// react-draft-wysiwyg.client.ts
export * from 'react-draft-wysiwyg'

// route.tsx
import { Editor } from '~/react-draft-wysiwyg.client'
...
<ClientOnly>
  {() => <Editor/>}
</ClientOnly>

[SpeedyCraftah]

That did the job. Thanks a bunch!

[sergiodxa]

Latest version of Remix Utils only allow function as children btw

[busbyk]

This was super helpful to me - thanks @kiliman.

Using a .client.ts file for modules with side effects that results in them being included in the server bundle seems like a nice approach to me. It's not discussed over here: #2936

Only problem I'm running into with using .client.ts files to reexport a module that should be client only is that typescript doesn't seem to recognize the module's type definitions. Have you run into that? I'll see if I can figure this out myself tomorrow.

@sergiodxa remix-utils looks awesome, btw. Going to check out the rest of it tomorrow.

[busbyk]

Nvm - silly mistake on my part.

For a module with a default export I was trying to:

export * as default from 'affiliate';

Which actually wasn't working at all but I didn't notice because I had the call to that module wrapped in a document guard and didn't visit that route of my app (late night work 😅).

Doing this instead works:

import Affiliate from 'affiliate';
export default Affiliate;

So ignore me but thanks again for the solution!

[ganesh2054]

To import Editor form  'react-draft-wysiwyg'  only on client side to avoid the "window is not defined' issue in Remix JS, you can use the useEffect hook as follows:

  const [Editor, setEditor] = useState(null);

  useEffect(() => {
    import('react-draft-wysiwyg')
      .then((Wysiwyg) => {
        setEditor(() => Wysiwyg.default.Editor);
      });

  }, []);
Now that you can use Editor with its necessary props, you don't get the "window is not defined ' error.

[goldcaddy77]

Thanks @kiliman . This works for react-player, too, for anybody hitting the same issue.

react-player.client.tsx:

import ReactPlayer from "react-player";
export default ReactPlayer;

video-player.tsx:

import { ClientOnly } from "~/components/client-only";
import ReactPlayer from "~/components/react-player.client";

export function VideoPlayer() {
  return (
      <ClientOnly fallback={<div>Video</div>}>
        {() => <ReactPlayer url={url} />}
      </ClientOnly>
  );
}