Headless client

Questions
1

New to Stytch, am following these steps:

import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';

Gives me Uncaught SyntaxError: ambiguous indirect export: StytchHeadlessClient

Any advice would be greatly appreciated.

2

Heya Sean,

Thanks for reaching out!

What framework are you using to write your project? TypeScript? Something else?

1 Like
3

Plain vanilla html and javascript. No react, no typescript, no framework.

Do you have any idea why StytchHeadlessClient would be an “ambiguous export” ? Does it mean that it is being exported more than once ?

4

Hey Sean – which version of @stytch/vanilla-js are you using? Would you mind posting the whole file where you import and use StytchHeadlessClient, with any sensitive data redacted? Thanks!

5

Sure - but it is EXACTLY as per the example site I posted.
It is the latest version ( only a few days ago )

"name": "@stytch/vanilla-js",
  "version": "0.9.5",

My code - the FIRST LINE (ie import ) throws the error.

// Get the button element and email input element

import { StytchHeadlessClient } from  '@stytch/vanilla-js/headless';

// Add a "click" event listener to the button

verifyEmailLink.addEventListener("click", function(event) {
  event.preventDefault(); // prevent the default link behavior
    const emailAddress = emailInput.value;
    const stytch = new StytchHeadlessClient('public-token-test-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
    stytch.magicLinks.email.loginOrCreate(emailAddress);
});

It definitely finds the js file(s) index.headless.js etc.

But so far I seen no words from Stytch about the error itself “ambiguous export” . What it means ? , what are likely causes ? , from where (which files) are the export being made ? Please provide ANY related info, so I can also attempt some troubleshooting from this side.

There is a huge LACK of any workings examples or doc about “headless”. Really there is nothing except that one line in that one page that I posted in this thread.

6

Hi Nicole , my post answering your question seems stuck in :

Our automated spam filter, Akismet, has temporarily hidden your post in Headless client for review.

Please let it flow through into this thread …

Anyway - the current status - after spending nearly a full day tracing your code and trying to work out what’s going on - I have kludged it together and have it working well enough for my project ( i hope).

I still have high hopes for Stytch in my project ! even with a few stumbles and roadblocks at the first step. My main comment (as I wrote in slack) is this :

I must say the documentation about “headless” is woefully inadequate and there are literally zero examples of how to make it work in vanillaJS. Some actual working , running webpages, with code that can be inspected - probably would have saved me over 12 hours of work. That’s my feedback … :wink:

7

Hey Sean – so sorry about the automated spam filter!

I’m very glad to hear that you got things working. Would you mind sharing what the issue was? We can definitely add that information to our docs to prevent others from running into the same error going forward, and update the instructions in our Vanilla JS example app if necessary. I apologize for the poor development experience that you had, and hope we can improve that experience going forward!

8

My dev experience has not been too bad, and certainly no need for you to apolgize. You have been great ! So very responsive… Thank you for that :pray:t2::grin: Main lacking in your examples is that the “vanillaJS” example, does not include an example for headless. I think in there it only shows examples for the ui-client.