Adding authkitMiddleware() causes the Vite dev client to crash

[1danii]

Describe the bug
When the middleware is added to src/start.ts, the browser throws:
Uncaught (in promise) SyntaxError: The requested module '/node_modules/eventemitter3/index.js?...' does not provide an export named 'default'

To Reproduce
Install the package, and follow the setup guide, start vite dev server and check browser console

Desktop (please complete the following information):

• OS: macOS
• Browser chrome
• authkit-nextjs version 0.8.2
• Tanstack Start version 1.167.65

Additional context
Seems to only effect the vite dev, error doesn't appear in vite preview
Fixed by downgrading back to 0.0.6

[50BytesOfJohn]

Plus one. Happening to me as well, all packages on latest versions, setup exactly like a setup guide suggest.

[brandonfancher]

#75 was supposed to resolve this but didn't. I was able to work around it for now. See my comment here: #72 (comment)

[imaai]

Release ETA?

[imaai]

0.8.3 didn't fix that for me.

[nicknisi]

@imaai can you provide more info on what you're seeing? I'm not able to reproduce in 0.8.3

[asabil]

@nicknisi Are you running vite dev?

[nicknisi]

@asabil Yes, running pnpm -F example dev locally and also built and deployed the example with the latest SDK (0.8.3) from npm and verified there, too. Are you doing something different?

[kmcke]

@nicknisi I'm still getting the error, not sure if this helps:

1. App mounts the provider

apps/web/src/routes/__root.tsx:12

import { AuthKitProvider } from "@workos/authkit-tanstack-react-start/client";

2. WorkOS client provider imports server actions

workos/authkit-tanstack-start/src/client/AuthKitProvider.tsx

import {
checkSessionAction,
getAuthAction,
refreshAuthAction,
switchToOrganizationAction,
} from '../server/actions.js';

3. Provider calls those actions from the browser

workos/authkit-tanstack-start/src/client/AuthKitProvider.tsx

const auth = await getAuthAction();
const auth = await refreshAuthAction({ data: { organizationId } });
const hasSession = await checkSessionAction();
const auth = await switchToOrganizationAction({ data: { organizationId } });

4. Server actions dynamically import action bodies

workos/authkit-tanstack-start/src/server/actions.ts

export const refreshAuthAction = createServerFn({ method: 'POST' })
.handler(async ({ data: options }) => {
const { refreshAuthBody } = await import('./action-bodies.js');
return refreshAuthBody(options);
});

Same pattern for getAuthAction, checkSessionAction, switchToOrganizationAction.

5. Action bodies call refreshSession

workos/authkit-tanstack-start/src/server/action-bodies.ts

import { refreshSession } from './auth-helpers.js';

const result = await refreshSession(options?.organizationId);

6. refreshSession calls getAuthkit

workos/authkit-tanstack-start/src/server/auth-helpers.ts

import { getAuthkit } from './authkit-loader.js';

const authkit = await getAuthkit();
const { auth: result, encryptedSession } = await authkit.refreshSession(...);

7. getAuthkit calls createAuthService

workos/authkit-tanstack-start/src/server/authkit-loader.ts

import { createAuthService } from '@workos/authkit-session';

authkitInstance = createAuthService({
sessionStorageFactory: (config) =>
new TanStackStartCookieSessionStorage(config),
});

8. createAuthService defaults to getWorkOS

workos/authkit-session/src/service/factory.ts

import { getWorkOS } from '../core/client/workos.js';

clientFactory = () => getWorkOS(),

9. getWorkOS comes from the WorkOS client module

workos/authkit-session/src/core/client/workos.ts

import { WorkOS } from '@workos-inc/node';

export const getWorkOS = once(createWorkOSInstance);

10. @workos-inc/node imports eventemitter3

@workos-inc/node/lib/factory-*.mjs

import { EventEmitter } from "eventemitter3";

So the short chain is:

AuthKitProvider.tsx
-> ../server/actions.js
-> action-bodies.ts
-> auth-helpers.ts
-> authkit-loader.ts
-> @workos/authkit-session/createAuthService
-> authkit-session/src/service/factory.ts
-> authkit-session/src/core/client/workos.ts
-> @workos-inc/node
-> eventemitter3.

[asabil]

The example works as-is, however updating to the newest vite 8 and typescript 6 and trimming the modules to the minimum leads to the error above. At least that's how I am able to reproduce the issue.

[nicknisi]

Ah ok, thanks for the context. Investigating!