Error in Remix app

[jsgv]

I am unable to get it to work on a Remix app. I get the following error message:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Code:

import Frame from "react-frame-component";

export default function Index() {
  return (
    <div>
      <p>Hello</p>
      <Frame>
        <h1>Testing</h1>
      </Frame>
    </div>
  );
}

Sandbox Link: https://codesandbox.io/p/devbox/crimson-night-pydmg6?file=%2Fapp%2Froutes%2F_index.tsx

[jsgv]

So it looks like the importing of the library is weird. The Frame component I need is the default field.

import Frame from "react-frame-component";

export default function Index() {
    console.log(Frame);

    return (
        <div>
            <p>Hello</p>
            <Frame.default>
                <h1>Testing</h1>
            </Frame.default>
        </div>
    );
}

Console

[ryanseddon]

So I think this is something weird Remix is doing with modules that have a default export. As even if I try and do:

import { default as Frame } from 'react-frame-component';

Logging out Frame still returns all the exports?

I even tried a different component that also default exports and it's the same error? https://codesandbox.io/p/devbox/determined-cherry-srvpy3?file=/app/routes/_index.tsx:9,19

I'd reach out to remix and see what their compiler is doing to default export modules in routes.

[jsgv]

It seems you are correct about Remix doing something weird with default imports. I guess I will have to check with them. Thanks for the reply @ryanseddon