Installing wasm bundle along with the rest of the npm package

[tjomson]

Hi, I want to run duckdb-wasm offline, so I need the wasm bundles to be installed on install rather than on runtime.
I had a question here duckdb/duckdb#10511 but was made aware that the discussion should be here.

[tjomson]

I was using the jsdelivr way described in the readme. Then I tried defining the paths like in the webpack example, but I can't use import.meta.url as i use commonjs

[Mause]

require.resolve or __dirname can replace import.meta.url, though it depends on your framework

[tjomson]

Thanks for the response!
Unfortunately require.resolve does not work either on the client side of my remix.run application.

To see if I could get anything working, I tried making a new app with the react vite template, and following the vite section of the readme.

When I am offline, I get a TypeError: NetworkError when attempting to fetch resource. in the browser, but it works when I am online. When looking at the network activity, I don't see any requests to other than localhost, so do you have any idea why that is?

This is my code I am trying to get working, it appears that it fails doing db.instantiate:

import './App.css'
import * as duckdb from '@duckdb/duckdb-wasm';
import duckdb_wasm from '@duckdb/duckdb-wasm/dist/duckdb-mvp.wasm?url';
import mvp_worker from '@duckdb/duckdb-wasm/dist/duckdb-browser-mvp.worker.js?url';
import duckdb_wasm_eh from '@duckdb/duckdb-wasm/dist/duckdb-eh.wasm?url';
import duckdb_wasm_coi from '@duckdb/duckdb-wasm/dist/duckdb-coi.wasm?url';
import eh_worker from '@duckdb/duckdb-wasm/dist/duckdb-browser-eh.worker.js?url';
import coi_worker from '@duckdb/duckdb-wasm/dist/duckdb-browser-coi.worker.js?url';
import coi_pworker from '@duckdb/duckdb-wasm/dist/duckdb-browser-coi.pthread.worker.js?url';

async function duckdbStuff() {
  const MANUAL_BUNDLES: duckdb.DuckDBBundles = {
    mvp: {
        mainModule: duckdb_wasm,
        mainWorker: mvp_worker,
    },
    eh: {
        mainModule: duckdb_wasm_eh,
        mainWorker: eh_worker,
    },
    coi: {
      mainModule: duckdb_wasm_coi,
      mainWorker: coi_worker,
      pthreadWorker: coi_pworker
    }
  };

  const bundle = await duckdb.selectBundle(MANUAL_BUNDLES);
  const worker = new Worker(bundle.mainWorker!);
  const logger = new duckdb.ConsoleLogger();
  const db = new duckdb.AsyncDuckDB(logger, worker);
  await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
  const conn = await db.connect()
  const res = await conn.query(`select 'hi there' as message;`)
  console.log("res", res)
}

function App() {
  duckdbStuff().then(() => console.log("done"))
  return (
    <>
      <h1>Hello</h1>
    </>
  )
}

export default App

[rob-blackbourn]

I have a demo project using vite here.

Does that help?