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

[imrostom]

If faced this issue in console.

my component is Test.client.jsx

const Test = () => {
    return <>
        <h1>This is test</h1>
    </>
}
export default Test;

I import this component this way

import Test from  "../components/Test.client"
import { Suspense } from "react";

and use like this,

<Suspense fallback="Loding.."> <Test /> </Suspense>

[anudeepreddy]

Hi,

I faced the same issue and here are my findings. Even if we mark a component client only by appending .client.tsx, remix renders the parent component where we are using this child component both on server side and client side. When it tries to do a server side render and since the Test component is clientonly the import would resolve into {} which is an object hence you see the error.

As a fix try to render Test only on the client by using an useEffect to determine if it's a client.

import Test from "../components/Test.client";
import { useState, useEffect } from "react";
function Parent() {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    isClient(true);
  }, []);
  return <>{isClient && <Test />}</>;
}

Alternatively you can use ClientOnly wrapper from remix-utils which essentially does the same but with a different approach.

[imrostom]

Thank you so much. It works perfectly using the example that you provided.

[empz]

Yes, it works, but what's the point of the client.tsx extension then if you need to do something else to tell Remix not to try to render that on the server? I don't get it...

[kjkent]

Alternatively, from the remix docs:

if (typeof document !== "undefined") {
  // Do stuff
}

The above could be put into a function to return true and used in a conditional as above. But yes, I don't understand why .client exists if this is still necessary.

[jrnxf]

Couldn't remix stub the component on the server if it sees it's importing from a .client in the parent?