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 development environments with hot module reload (HMR). The library uses a Web Worker for automatic token refresh, and development servers may have trouble locating this worker file when it resides in node_modules.

Note on Production Builds: This issue typically only affects development. When you build your project for production, build tools correctly bundle the worker, and the library's internal default (using import.meta.url) works as expected.

The Problem

When running your app in development mode, dev servers can struggle to serve the worker script from node_modules, resulting in a 404 Not Found error when the application tries to load the worker. This breaks automatic token refresh functionality.

Solution 1: Explicitly Import the Worker URL

Most modern build tools support importing workers as URLs. Pass this URL to the Session constructor via the workerUrl option.

Vite

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

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

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

const sessionOptions: SessionOptions = {
  workerUrl: refreshWorkerUrl, // Pass the imported URL
  // ... other options
};

export const session = new Session(clientDetails, sessionOptions);

Webpack

import { Session, SessionOptions } from '@uvdsl/solid-oidc-client-browser';

// Use Webpack's worker-loader or native Worker URL syntax
import refreshWorkerUrl from '@uvdsl/solid-oidc-client-browser/dist/RefreshWorker.js';

const sessionOptions: SessionOptions = {
  workerUrl: new URL(refreshWorkerUrl, import.meta.url),
  // ... other options
};

export const session = new Session(clientDetails, sessionOptions);

Other Build Tools

Consult your build tool's documentation for importing workers as URLs. Most modern tools support similar patterns with special import suffixes or loaders.

Solution 2: Configure Your Build Tool to Copy the Worker

Alternatively, configure your development server to copy the worker file to your public directory or build output.

Vite

// vite.config.js
import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@uvdsl/solid-oidc-client-browser/dist/RefreshWorker.js',
          dest: '.'
        }
      ]
    })
  ]
});

Then reference the worker from your public path:

const sessionOptions: SessionOptions = {
  workerUrl: '/RefreshWorker.js',
  // ... other options
};

Stencil

// stencil.config.ts
import { join } from 'path';

export const config = {
  outputTargets: [
    {
      type: 'www',
      copy: [
        {
          src: join(__dirname, '../node_modules/@uvdsl/solid-oidc-client-browser/dist/esm/web/RefreshWorker.js'),
          dest: 'build/RefreshWorker.js',
        },
      ]
    }
  ]
};

Other Build Tools

Most build tools offer a way to copy static assets during development. Look for:

• Webpack: CopyWebpackPlugin
• Parcel: Automatic copying from public directory
• Rollup: rollup-plugin-copy

Which Solution Should I Use?

• Solution 1 (Import as URL) doesn't require build configuration changes
• Solution 2 (Copy worker file) is useful if your build tool doesn't support worker URL imports or if you need more control over the worker's location

Both solutions ensure the Web Worker is accessible during development while maintaining compatibility with production builds.