Improve how importing works in NextJS

[rolznz]

How we import is overly-complicated and developers will probably be confused as why it's necessary. The project currently does not compile correctly serverside (in NextJS) so code like this is needed:

"use client"
import dynamic from 'next/dynamic';
const Button = dynamic(
  () => import('@getalby/bitcoin-connect-react').then((mod) => mod.Button),
  {
    ssr: false,
  }
);

// Render the Button normally

<Button />

// or to use the API:

<button
  onClick={async () => {
    const launchModal = await import('@getalby/bitcoin-connect-react').then(
      (mod) => mod.launchModal
    );
    launchModal();
  }}
>
  Launch modal
</button>

Referencing #153

Ideally Button and launchModal can be directly imported and just work.

[rolznz]

Can https://lit.dev/docs/ssr/overview/ help?

The issue is "ReferenceError: HTMLElement is not defined" which I believe comes from code in the lit package which is incompatible with NextJS?

[rolznz]

https://www.npmjs.com/package/@lit-labs/nextjs says "Lit components can be imported and added to Next.js projects but by default"

I wonder if it's how the lit dependency is being bundled by bitcoin connect. I moved it to be a dev dependency due to Lit always giving a warning about being in dev mode, but that might actually stop it from being compiled correctly in a NextJS project.
In Authoring components it says "Don't bundle Lit into published components."

[ekzyis]

Thanks for this ticket! This was (and still is) definitely one of my major pain points when working with bitcoin-connect.