How to use ClientOnly with remix v2

[chris-m92]

I feel like this is a dumb question, but following the docs in the README is not helping out.

My understanding is that I can wrap my route or certain portion of my application with the <ClientOnly> component and that component and all its children should be only rendered on the client post hydration.

However, when I do this, I'm still running into issues that window is not defined.

In this specific instance, I am building a leaflet map as the primary function of my _index route, so I've modified app/routes/_index.tsx to the following:

import type { MetaFunction } from '@remix-run/node'
import { Provider } from 'react-redux'
import MapEngine from '~/components/MapEngine'
import { store } from '~/store'
import { ClientOnly } from 'remix-utils/client-only'

export const meta: MetaFunction = () => {
  return [
    { title: 'Title' },
    { name: 'description', content: 'Description.' },
  ]
}

const Index = (): JSX.Element => {
  return (
    <ClientOnly>
      {() => <Application />}
    </ClientOnly>
  )
}

const Application = (): JSX.Element => {
  return (
    <Provider store={store}>
      <MapEngine />
    </Provider>
  )
}

export default Index

My expectation is that now when I go to my site, it runs only on the client. However, when attempting to work with the site (particularly in dev environment), I receive the following error:

window is not defined

Now granted, there are a few things going on here

1. I'm using the unstable/vite template
2. The various dependencies all depend on client rendering, including:

• leaflet
• react-leaflet
• esri-leaflet

Following the stack trace, it looks like it starts from the esri-leaflet module. However, that is imported in my MapEngine component and should, in theory be rendered client only when window is defined.

Any help here would be appreciated.

[xHenrySx]

If you are accessing window inside your MapEngine component, you need to ensure that it is not undefined.
Like:
const value = typeof window !== "undefined" ? JSON.parse(localStorage.getItem("carrito")) ?? [] : [];

[chris-m92]

I tried that in my _index route. It didn't work. But isn't the point of <ClientOnly> to not need to check window is defined like that?

[sergiodxa]

Most likely MapEngine or a dependency of MapEngine is trying to access something from window at the module level instead of component level.

This cause that just by importing the module it tries to use window and fails to.

Try to rename your MapEngine file to have the .client extension, this will tell Remix to only include the module client side

Now the exported component will be undefined server side and that's where ClientOnly will prevent rendering (or trying to render it) server-side.

[chris-m92]

Yeah I think I found the problem package. Question now is, does remix/vite also follow the *.client.ts notation?

[sergiodxa]

Yes it does, and if it doesn't work open and issue because it should keep working

[chris-m92]

@sergiodxa, thanks for the help.
The next issue I'm running into is getting an import error. I've completely dumbed down the code to the following

app/routes/_index.tsx

import type { MetaFunction } from '@remix-run/node'
import MapEngine from '~/components/MapEngine/MapEngine.client'

export const meta: MetaFunction = () => {
  return [
    { title: 'MY WEBSITE' },
    { name: 'description', content: 'MY WEBSITE' },
  ]
}

const Index = (): JSX.Element => {
  return (
    <MapEngine />
  )
}

export default Index

~/components/MapEngine/MapEngine.client.tsx

const MapEngine = (): JSX.Element => {
  return (
    <h1>Map Engine</h1>
  )
}

export default MapEngine

Doing the following throws the following Error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

If I remove the .client from the file name and import, the component runs just fine. However, by introducing the .client introduces the error.

Any thoughts on what I may be missing?

[sergiodxa]

You need to wrap the component in ClientOnly, because as I mentioned on the server the export will be undefined and you can't render undefined, so you wrap MapEngine in ClientOnly to prevent trying to render it.

[chris-m92]

That did it... The combination of <ClientOnly> and .client.tsx did the trick. I appreciate it!