Failed to execute 'fetch' on 'WorkerGlobalScope' when using web worker

[churichard]

I'm trying to convert my pglite implementation to use a web worker by following https://pglite.dev/docs/multi-tab-worker and https://github.com/LeonAlvarez/ElectroDrizzle. However, even when following the instructions on the links above, I keep on running into the following error:

TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from /_next/static/media/pglite.ef93c2b2.data

Digging into it a bit, I think the issue is that it's looking for release/pglite.wasm and release/pglite.data, but they don't exist. How can I fix this?

[marvinarn]

I encountered the same issue and solved it by disabling turbopack by removing the --turbopack flag from the next dev and next build commands

[kuizuo]

The following code I wrote in next.js (with --turbopack) causes the same problem.

// pglite.worker.ts
import { PGlite } from '@electric-sql/pglite'
import { worker } from '@electric-sql/pglite/worker'

worker({
  async init() {
    const pg = await PGlite.create()
    return pg
  },
})

// pglite-provider.ts
'use client'

import { PGliteProvider } from '@electric-sql/pglite-react'
import { live, LiveNamespace } from '@electric-sql/pglite/live'
import { PGliteWorker } from '@electric-sql/pglite/worker'

type PGliteWorkerWithLive = PGliteWorker & { live: LiveNamespace }
import { useEffect, useState } from 'react'

export function PGProvider(props: Readonly<{ children: React.ReactNode }>) {
  const [pgForProvider, setPgForProvider] = useState<PGliteWorkerWithLive>()

  const setPglite = async () => {
    const pg = await PGliteWorker.create(new Worker(new URL('./pglite.worker.ts', import.meta.url), { type: 'module' }),
      {
        extensions: {
          live,
        },
      })

    setPgForProvider(pg)
  }

  useEffect(() => {
    if (!pgForProvider) {
      setPglite()
    }
  }, [pgForProvider])

  if (!pgForProvider) return <div>Starting PGlite...</div>

  return (
    <PGliteProvider db={pgForProvider}>
      {props.children}
    </PGliteProvider>
  )
}

Chrome Devtools Console ⬇️