Development Hints

Web Worker URL not found

This guide explains how to solve a common setup issue when using @uvdsl/solid-oidc-client-browser in a Vite project. This guide focuses on how to correctly configure it in a Vite development environment.

Note on Production Builds. This workaround is typically only necessary for development. When you run npm run build, Vite correctly bundles the worker, and the library's internal default (using import.meta.url) works as expected.

Solving the Vite Development Server Error

The Problem. When running your app in development mode (npm run dev), Vite's dev server can have trouble locating the worker script, especially since it resides within your node_modules directory. This often results in a 404 Not Found error when the application tries to load the worker.

The Solution. To fix this, you must explicitly import the worker file as a URL using Vite's ?sharedworker&url suffix and pass this URL to the WebWorkerSession constructor.

This is the recommended setup for all Vite-based applications.

// In your app's main entry point or session setup file
import { Session, SessionOptions } from '@uvdsl/solid-oidc-client-browser';

// 1. Explicitly import the worker URL using Vite's query suffix
import refreshWorkerUrl from '@uvdsl/solid-oidc-client-browser/dist/RefreshWorker.js?sharedworker&url';

// 2. Define your client details 
const clientDetails = {
  // ... your client details
};

// 3. Configure the session, passing the worker URL
const sessionOptions: SessionOptions = {
  workerUrl: refreshWorkerUrl, // Pass the imported URL here
 // ... the remaining options
};

// 4. Create the session instance
export const session = new WebWorkerSession(clientDetails, sessionOptions);