Error `ERR_REQUIRE_ESM` when using the StellarWalletsKit in SvelteKit

[ElliotFriend]

• I'm submitting a ... [x] bug report [ ] feature request [ ] question about the decisions made in the repository [ ] question about how to use this project

• Summary

I've created a vanilla SvelteKit app, using npx sv create my-app, selecting the most barebones options, using TypeScript.

I import the wallet kit components just like in the documentation:

import { StellarWalletsKit, WalletNetwork, allowAllModules, XBULL_ID } from "@creit.tech/stellar-wallets-kit";

And that's enough to throw an error. I'm experiencing the exact same trouble as reported in #11 where I see an error about ES modules and commonjs.

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/elliotvoris/Dev/experiments/my-app2/node_modules/lit/index.js from /Users/elliotvoris/Dev/experiments/my-app2/node_modules/@creit.tech/stellar-wallets-kit/components/modal/stellar-wallets-modal.cjs not supported.
Instead change the require of index.js in /Users/elliotvoris/Dev/experiments/my-app2/node_modules/@creit.tech/stellar-wallets-kit/components/modal/stellar-wallets-modal.cjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/elliotvoris/Dev/experiments/my-app2/node_modules/@creit.tech/stellar-wallets-kit/components/modal/stellar-wallets-modal.cjs:1:20) {
  code: 'ERR_REQUIRE_ESM'
}

• Other information (e.g. detailed explanation, stack traces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

SvelteKit uses vite under the hood, so perhaps the problem is with that? I don't know nearly enough about the specifics that go into packaging, building, etc. So, I'm a bit at a loss.

Creating a brand new React app gave me no such errors.

[ElliotFriend]

I managed to find a workaround, if it's any help in troubleshooting. Changing the vite.config.js file so it doesn't "externalize" these dependencies managed to get it working. Here's the changed file in the commit. And it was these packages I added to the noExternal array:

{
    ssr: {
        noExternal: [
            '@creit.tech/stellar-wallets-kit',
            '@stellar/freighter-api',
            '@lobstrco/signer-extension-api',
        ],
    },
}

I'm not really sure what "externalizing" a dependency even means, but here's the vite docs about this option

[earrietadev]

Hi there, not really sure what that configuration does in Vite but assuming for the "SSR" it must be some sort of logic to skip using those libraries during the server side rendering process (but I could be wrong)

It's curious because the testing page for development is using Vite https://github.com/Creit-Tech/Stellar-Wallets-Kit/blob/d8933ae33e484e99b68943ba1c6264dbd3a57e73/package.json#L29

I will be investigating about this during the week and fix it

[to-journey]

Hello, @earrietadev I also have a trouble while importing @creit.tech/stellar-wallets-kit.

import { allowAllModules } from "@creit.tech/stellar-wallets-kit";
import { LedgerModule } from "@creit.tech/stellar-wallets-kit/modules/ledger.module";

require() of ES Module D:\Work_List\028\soroban-versioning\dapp\node_modules\lit\index.js from D:\Work_List\028\soroban-versioning\dapp\[email protected]\stellar-wallets-kit\components\modal\stellar-wallets-modal.cjs not supported. Instead change the require of index.js in D:\Work_List\028\soroban-versioning\dapp\[email protected]\stellar-wallets-kit\components\modal\stellar-wallets-modal.cjs to a dynamic import() which is available in all CommonJS modules.

I am using astro and trying to import above react-jsx component in the astro file. I would appreciate any help.