Error importing Duffel Components in Sveltekit

mattsafaii commented 11 months ago

Hey Duffel Team!

I'm using the Duffel Ancillaries component in a Sveltekit application I am building.

I have followed the steps listed in your docs for the Ancillaries component here: Using the component in non-React environments

Version of @duffel/components: ^3.1.5

I am installing it using npm i @duffel/components --save

The framework I am using is Sveltekit.

I have created a component in the Ancillaries.svelte file with the following code taken directly from your docs:

<script>
    import { onDuffelAncillariesPayloadReady, renderDuffelAncillariesCustomElement } from '@duffel/components/custom-elements'

    window.onload = function () {
        renderDuffelAncillariesCustomElement({
        debug: true,
        offer_id: 'fixture_off_1',
        services: ['bags', 'seats', 'cancel_for_any_reason'],
        passengers: [
            {
                id: 'pas_001',
                given_name: 'Mae',
                family_name: 'Jemison',
                gender: 'F',
                title: 'dr',
                born_on: '1956-10-17',
                email: 'm.jemison@nasa.gov',
                phone_number: '+16177562626',
            },
            {
                id: 'pas_002',
                given_name: 'Amelia',
                family_name: 'Earhart',
                gender: 'F',
                title: 'mrs',
                born_on: '1987-07-24',
                email: 'amelia@duffel.com',
                phone_number: '+442080160509',
            },
        ]
        })
    }

    onDuffelAncillariesPayloadReady((data, metadata) => {
    console.log('Ancillaries selected. Order payload:', data)
    console.log('Ancillaries selected. Ancillary services chose:', metadata)
    })
</script>

<duffel-ancillaries></duffel-ancillaries>

I have tried using "@duffel/components" in the import statement but got the following errors: Module '"@duffel/components"' has no exported member 'onDuffelAncillariesPayloadReady'. Module '"@duffel/components"' has no exported member 'renderDuffelAncillariesCustomElement'.

When I changed the import from @duffel/components to @duffel/components/custom-elements the error went away.

I'm not sure if this is the correct file that should be imported. However, when I run the application locally I get a 500 error that says:

ReferenceError: HTMLElement is not defined
    at Object.<anonymous> (/Users/matt/Sites/travvel-ai/node_modules/@duffel/components/custom-elements.js:30:59370)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

I recorded a Loom going through a fresh install of @duffel/components which you can watch here: Duffel Ancillaries Implementation

It seems like the initial import from @duffel/components is where the error is coming from. I shouldn't have to import from `@duffel/components/custom-elements'

I don't know what could be wrong with my implementation, but if the error is due to the offer_id, services, or passengers objects having the wrong data, I would expect the component to render with an error.

Please let me know if there is something I am doing wrong here. Otherwise, would love to see a patch for this so I can just import from @duffel/components and be able to use the Ancillaries component in my Checkout flow.

Looking forward to your response!

-Matt

andrejak commented 11 months ago

I don't think the @duffel/components/custom-elements import is necessarily wrong, we use that in one of our examples too: https://github.com/duffelhq/duffel-components/blob/cd724b366da530f637929273d576e813ae3233a9/src/examples/payments-just-typescript/src/index.ts#L5 We might need to update the guide to reflect that.

I've never used Sveltekit, but I can look into it further. First I just wanted to quickly check - a google search brings up some suggestions that maybe something needs to changed perhaps in the tsconfig or the way you import:

Does any of this seem relevant or help you with the error?

andrejak commented 10 months ago

I'm going to close this issue due to inactivity. Please let us know if you still need help.

mattsafaii commented 10 months ago

@andrejak That's fine you can keep this closed. Those links didn't help unfortunately and I didn't want to spend too much time on it. I decided to use the CDN instead and got a different error which I opened an issue for here: #184

duffelhq / duffel-components

Error importing Duffel Components in Sveltekit #173