SSR is broken in Remix

[buesing]

Describe the bug

The component is throwing an error when used in Remix:

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

This happens when just installing and rendering the component in a barebones Remix app, without anything else added. The component renders on the client, the problem just occurs on server renders.

To Reproduce Steps to reproduce the behavior:

• Clone example repo
• Run npm i and npm run dev (also occurs in production mode with npm run build and npm start)
• Load localhost:3000

Expected behavior It renders the component

Code Sandbox I have set up a reproduction repo here: https://github.com/buesing/currency-input-repro

[buesing]

I found this obscure workaround. One variant works on the server, the other on the client.

import * as CurrencyInputExports from 'react-currency-input-field'
const CurrencyInput =
  'default' in CurrencyInputExports.default
    ? (CurrencyInputExports.default as any).default
    : CurrencyInputExports.default

[lime517]

Just wanted to confirm I'm experiencing the same issue within Remix. I found you can get around the issue by wrapping the component in <ClientOnly> from remix-utils/client-only.

Obviously this isn't ideal, though, as it should be able to render on the server side.

[lime517]

@buesing - how did you find your obscure workaround? I modified it so that type hinting is still present on the <CurrencyInput> component.

Using the below code in a component file has solved all issues for me, without any apparent drawbacks (other than the extra setup).

import type { FC } from "react";
import * as CurrencyInputExports from "react-currency-input-field";

const CurrencyInput =
  "default" in CurrencyInputExports.default
    ? ((CurrencyInputExports.default as any)
        .default as FC<CurrencyInputExports.CurrencyInputProps>)
    : CurrencyInputExports.default;

[rivertam]

Still an issue, it would seem 😢