ReferenceError: SharedWorker is not defined

[njouanin]

Hi,
Using "@ldo/solid-react": "^1.0.0-alpha.51" with a Next/react app.
When using the BrowserSolidLdoProvider in a page, I get the following error on the console:

⨯ ReferenceError: SharedWorker is not defined
    at ignore-listed frames {
  digest: '745045082'
}

My guess is that the BrowserSolidLdoProvider component should be declared as client (use client) so it can resolve the browser SharedWorker.

[mrkvon]

This seems to be related to the recent migration to a different client auth library #151.

I'm not sure whether the previous library is RSC-compatible. FWIW, it includes use client in the example project.

Have you used previous versions of LDO, and did it work for you in React server components?

Until this issue is fixed, can you try wrapping the Provider in a client component?

Maybe like this:

'use client'
export { BrowserSolidLdoProvider } from '@ldo/solid-react'

Or maybe this will work:

'use client'

import type { ReactNode } from 'react'
import { BrowserSolidLdoProvider } from '@ldo/solid-react'

export function BrowserSolidLdoProviderWrapper({ children }: { children: ReactNode }) {

  return (
    <BrowserSolidLdoProvider>
      {children}
    </BrowserSolidLdoProvider>
  )
}

Does that workaround address your issue?

[njouanin]

My page.tsx already has 'use client' directive.
I also tried:

export function BrowserSolidLdoProviderWrapper({ children }: { children: ReactNode }) {
  'use client'
  return (
    <BrowserSolidLdoProvider>
      {children}
    </BrowserSolidLdoProvider>
  )
}

I still get the error. So no workaround here.

[mrkvon]

@njouanin Thank you for clarifying! Sounds like the issue may need a bit more to address than just the directive.

So, have you just started with LDO in Next.js, or did you use it prior to the version 1.0.0-alpha.51, and did it work? That could help us figure out whether this is a regression.

[njouanin]

Can't really say. I'm using ldo with @solid/react-component which also has some issues I'm trying to resolve. I'm new to Next, React and Solid ...

[mrkvon]

@njouanin I was able to reproduce the issue. You were right, "use client" alone isn't sufficient. The SharedWorker API is likely accessed on top level, so there is no clear boundary (like useEffect hook) to run it on client only.

Until we address this, please try wrapping the BrowserSolidLdoProvider like this, to load it dynamically:

"use client";

import dynamic from "next/dynamic";

const BrowserSolidLdoProvider = dynamic(
  () =>
    import("@ldo/solid-react").then(
      ({ BrowserSolidLdoProvider }) => BrowserSolidLdoProvider,
    ),
  { ssr: false },
);

export { BrowserSolidLdoProvider };

and then import the BrowserSolidLdoProvider from this wrapper.

This should help you get going until we ship a proper fix. With dynamic loading, you will likely lose SSR benefits of Next.js for the whole subtree, unfortunately.

If you try this out, please let me know whether it works for you.

(btw when you implement authentication, use session.isActive instead of session.isLoggedIn. The guide is slightly outdated.)

[njouanin]

Thanks for the workaround !
The SharedWorker error is gone now. I'll keep on and let you know if everything works.