How to use createWorkersKVSessionStorage correctly?

[jasperdunn]

Following the documentation:

const { getSession, commitSession, destroySession } =
  createWorkersKVSessionStorage({
    // The KV Namespace where you want to store sessions
    kv: YOUR_NAMESPACE,
    cookie: sessionCookie,
  });

I'm not sure where YOUR_NAMESPACE is supposed to come from as I'm used to getting it from context, I get typescript errors no matter what I try.

I ended up putting it in load-context.ts

export const getLoadContext: GetLoadContextFunction<Env> = ({ context, request }) => {
  const { getSession, commitSession, destroySession } = createWorkersKVSessionStorage({
    kv: context.cloudflare.env.KV,
    cookie: createCookie('__session', {
      httpOnly: true,
      path: '/',
      sameSite: true,
      secrets: ['r3m1xr0ck5'],
      secure: isProduction(),
    }),
  });

  return {
    ...context,
    sessionStorage: {
      get: () => getSession(request.headers.get('Cookie')),
      commit: commitSession,
      destroy: destroySession,
    },
  } satisfies AppLoadContext;
};

This approach works for npm run build && npm run start, though does feel strange, maybe it's an antipattern to have the sessionStorage be created inside the context??

However npm run dev gives me:

TypeError: Cannot read properties of undefined (reading 'get')
    at loader (/Users/jasperdunn/Developer/remix-app/app/root.tsx:21:48)

[jasperdunn]

Here's my next attempt:

// app/sessions.server.ts

import { getPlatformProxy } from 'wrangler';

export const { getSession, commitSession, destroySession } = createWorkersKVSessionStorage<
  SessionData,
  SessionFlashData
>({
  kv: (await getPlatformProxy<Env>()).env.YOUR_NAMESPACE,
  cookie: createCookie('__session', {
    httpOnly: true,
    path: '/',
    sameSite: true,
    secrets: ['r3m1xr0ck5'],
    secure: isProduction(),
  }),
});

However, esbuild doesn't like it at all:

Error: [vite:esbuild-transpile] Transform failed with 1 error:
index.js:545:7: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

[jasperdunn]

Ok, so I ended up copying the code directly from the createWorkersKVSessionStorage function source. This seems to be exactly what I want, and gives me more control over it anyway.