Issue building Astro project with @code-wallet/elements

Issue:

Unable to build Vite / Astro project with the @code-wallet/elements@1.1.0 SDK. Error: [commonjs--resolver] Failed to resolve entry for package "@code-wallet/elements". The package may have incorrect main/module/exports specified in its package.json.

Notes:

Included steps to reproduce with Astro + React and with standalone Vite + React project. A different error happens with Create React App from React example in docs https://code-wallet.github.io/code-sdk/docs/example/react-example.html and the steps to reproduce for that error is to follow the docs.

Steps to reproduce with Astro + React:

Start Astro Project

npm create astro@latest
 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro

  tmpl   How would you like to start your new project?
         Include sample files
      ✔  Template copied

  deps   Install dependencies?
         Yes
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
      ✔  TypeScript customized

   git   Initialize a new git repository?
         Yes
      ✔  Git initialized

  next   Liftoff confirmed. Explore your project!
  ...

Add React to Astro

cd ./astro
npx astro add react

Need to install the following packages:
astro@3.4.1
Ok to proceed? (y) y
✔ Resolving packages...
  ...

✔ Continue? … yes
✔ Installing dependencies...
11:10:40 AM [add] Unable to locate a config file, generating one for you.

  Astro will make the following changes to your config file:
  ...

✔ Continue? … yes

  ...
  Astro will make the following changes to your tsconfig.json:
  ...

✔ Continue? … yes

   success  Successfully updated TypeScript settings

Install @code-wallet/elements.

npm i @code-wallet/elements
npm WARN deprecated @bufbuild/connect-web@0.8.6: Connect has moved to its own org @connectrpc and has a stable v1. Run `npx @connectrpc/connect-migrate@latest` to update. See https://github.com/connectrpc/connect-es/releases/tag/v0.13.1 for details.
npm WARN deprecated @bufbuild/connect@0.8.6: Connect has moved to its own org @connectrpc and has a stable v1. Run `npx @connectrpc/connect-migrate@latest` to update. See https://github.com/connectrpc/connect-es/releases/tag/v0.13.1 for details.

added 37 packages in 5s

7 packages are looking for funding
  run `npm fund` for details

Add example code from React example: https://code-wallet.github.io/code-sdk/docs/example/react-example.html

// src/components/App.tsx
import { useEffect, useRef } from "react"
import code from "@code-wallet/elements"

function App() {
  const el = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const { button } = code.elements.create("button", {
      currency: "usd",
      destination: "E8otxw1CVX9bfyddKu3ZB3BVLa4VVF9J7CTPdnUwT9jR",
      amount: 0.05,
    })

    button.mount(el.current!)
  }, [])

  return (
    <div className="App">
      <div ref={el} />
    </div>
  )
}
export default App

Add App to Astro route:

---
// src/pages/index.astro
import Layout from "../layouts/Layout.astro"
import App from "../components/App.tsx"
---

<Layout title="Welcome to Astro.">
  <App />
</Layout>

Add TypeScript declarations path to ./tsconfig.json (bug happens regardless if path is added or not, this is for the TS lsp to work).

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "paths": {
      "@code-wallet/elements": [
        "./node_modules/@code-wallet/elements/dist/index.d.ts"
      ]
    }
  }
}

Attempt to build project.

npm run build

> astro@0.0.1 build
> astro check && astro build

11:42:13 AM [content] No content directory found. Skipping type generation.
11:42:13 AM [check] Getting diagnostics for Astro files in /.../deleteme/astro...
Result (6 files): 
- 0 errors
- 0 warnings
- 0 hints

11:42:17 AM [content] No content directory found. Skipping type generation.
11:42:17 AM [build] output target: static
11:42:17 AM [build] Collecting build info...
11:42:17 AM [build] Completed in 73ms.
11:42:17 AM [build] Building static entrypoints...
[commonjs--resolver] Failed to resolve entry for package "@code-wallet/elements". The package may have incorrect main/module/exports specified in its package.json.
 error   Failed to resolve entry for package "@code-wallet/elements". The package may have incorrect main/module/exports specified in its package.json.

Steps to Reproduce with Vite + React

Create Vite project

npm create vite@latest
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/albertovaldez/deleteme/vite/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

Install code wallet elements.

npm i @code-wallet/elements 
npm WARN deprecated @bufbuild/connect-web@0.8.6: Connect has moved to its own org @connectrpc and has a stable v1. Run `npx @connectrpc/connect-migrate@latest` to update. See https://github.com/connectrpc/connect-es/releases/tag/v0.13.1 for details.
npm WARN deprecated @bufbuild/connect@0.8.6: Connect has moved to its own org @connectrpc and has a stable v1. Run `npx @connectrpc/connect-migrate@latest` to update. See https://github.com/connectrpc/connect-es/releases/tag/v0.13.1 for details.

added 30 packages, and audited 240 packages in 6s

45 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Add example code to src/App.tsx

import { useEffect, useRef } from "react"
import code from "@code-wallet/elements"

function App() {
  const el = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const { button } = code.elements.create("button", {
      currency: "usd",
      destination: "E8otxw1CVX9bfyddKu3ZB3BVLa4VVF9J7CTPdnUwT9jR",
      amount: 0.05,
    })

    button?.mount(el.current!)
  }, [])

  return (
    <div className="App">
      <div ref={el} />
    </div>
  )
}
export default App

Attempt to build

npm run build

> vite-project@0.0.0 build
> tsc && vite build

vite v4.5.0 building for production...
✓ 5 modules transformed.
✓ built in 97ms
[commonjs--resolver] Failed to resolve entry for package "@code-wallet/elements". The package may have incorrect main/module/exports specified in its package.json.
error during build:
Error: Failed to resolve entry for package "@code-wallet/elements". The package may have incorrect main/module/exports specified in its package.json.

code-payments / code-sdk