Svelte cannot import @teamhanko/hanko-elements

[HurricanKai]

Checklist

• I could not find a solution in the existing issues or docs.
• I agree to follow this project's Code of Conduct.

Describe the bug

All I get when following the guide & importing @teamhanko/hanko-elements is an error page "Unexpected token 'export'"

Reproducing the bug

• Initialize a new Svelte Project
• follow the tutorial (pasting the code into a +page.svelte somewhere, and replacing the API URL)
• Observe Error Page

Logs

.../my_project/node_modules/.pnpm/@teamhanko+hanko-elements@0.8.0/node_modules/@teamhanko/hanko-elements/dist/elements.js:2
<the entire line>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25

Configuration

No response

Hanko Version

^0.8.0 (NPM package)

OS Hanko Backend

None

OS Version Hanko Backend

Using cloud. This should be irrelevant given it's a JS issue?

OS

Linux

OS Version

Arch Linux on 6.4.3-zen1-1-zen

Browser Version

Firefox Developer Edition v116.0b4

Environment

None

Additional Context

No response

[HurricanKai]

Looking at the example it looks like it's using raw svelte and not sveltekit?
It's also registering hanko only once in the root, not sure if that's relevant?
The guide is not working for me for sure, but I'm not even sure where the error could be coming from.

[lfleischmann]

Hi @HurricanKai,

Looking at the example it looks like it's using raw svelte and not sveltekit?

Yes, that is correct.

As for the error: it is possible that this is due to SvelteKit doing SSR per default. hanko-elements require access to browser APIs which may not be/are not available in an SSR context. You could try turning ssr off for the page you place a hanko-element on.

[HurricanKai]

Hi,

I'll try this in a bit, but I highly doubt this. Svelte should just render the html tag and the browser will pick that up. The register call is only in onMount, so in browser only.
It fails with a syntax error on import, which would also prevent any bundling, so SSR seems unlikely to be the cause.
I'll still try this in a bit, but I'd appreciate any other pointers.
Is the raw svelte sample known to work well?

[lfleischmann]

Hi @HurricanKai,

were you able to test whether the suggestion in my previous comment helped at all?

[masylum]

the same error happens with qwik