Help with client side components.

[antonysastre]

Hi,

New to, and loving, Remix!

I'm a bit stuck on understanding "client side only" code. Here's my situation:

I'm getting this error when trying to import and use a component in a route.

Warning: React.jsx: 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.

app/routes/home.tsx

The error is on this file on the line.

import Hello from '../components/Hello.client';

export default function Home() {
  return (
    <div>
      <Hello />
    </div>
  );
}

app/components/hello.client.tsx

export default function Hello() {
  return (
    <div>
      <h1>Hello Remix!</h1>
    </div>
  );
}

Am i missing how to do this properly?

The reason i'm using *.client.tsx on the component:

This code is just test code to sanity check the error.
The library that i'm using originally breaks on self is undefined — I think due to it using the window object. I was hoping that forcing the component to client side would resolve that. But i get a sense i'm doing it wrong?

Could anyone guide me here? 🙏 :slight_smile:

[suhaotian]

You can't do like this. Because:

import Hello from '../components/Hello.client';

export default function Home() {
  return (
    <div>
      <Hello />
    </div>
  );
}

When run in server, it will be:

export default function Home() {
  return (
    <div>
      <Hello />
    </div>
  );
}

So Hello is undefined~

And you can do this to solve this problem:

import Hello from '../components/Hello.client';

const isClient = typeof document !== 'undefined';

export default function Home() {
  return (
    <div>
      {isClient && <Hello />}
    </div>
  );
}

[antonysastre]

Aha, i see. That makes sense. Thank you!

What the import is that only run on the client?
I'm getting Warning: Expected server HTML to contain a matching <div> in <div>. on the client side component. It's accessing a dom element.

[kiliman]

I recommend using <ClientOnly> from remix-utils

import { ClientOnly } from 'remix-utils/client-only';
import Hello from '../components/Hello.client';

export default function Home() {
  return (
    <div>
      <ClientOnly>{() => <Hello />}</ClientOnly>
    </div>
  );
}

The ensures that the component renders after hydration so that you won't get the hydration errors.

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

[antonysastre]

Thanks kiliman 👍

[joaoguidev]

That is awesome. Thank you.
I was having problems with using framer motion and having a strict csp that does not allow inline style. It solved my problem.