getJsDelivrBundles is not a function

[stefanonardo]

Hello, I'm trying to create a duckdb with const { db, loading, error } = useDuckDb();, however it fails the initialization on const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles(); because duckdb is not imported properly but it's this object

default: "/static/media/duckdb-browser.e56a1ba9d486f1113bb3.cjs"

[holdenmatt]

Sorry for delay, are you still having this issue? I just updated to the latest dev build, so would be useful to know if it's still an issue after upgrading?

[cspence001]

I'm having the same issue:

Uncaught (in promise) TypeError: duckdb.getJsDelivrBundles is not a function
    at initializeDuckDb.ts:38:1
    at Generator.next (<anonymous>)
    at sourceMaps.js:16:1
    at new Promise (<anonymous>)
    at __async (sourceMaps.js:16:1)
    at _initializeDuckDb (initializeDuckDb.ts:35:1)
    at initializeDuckDb.ts:25:1
    at Generator.next (<anonymous>)
    at sourceMaps.js:16:1
    at new Promise (<anonymous>)

[holdenmatt]

That's strange, I haven't been able to reproduce it. Can anyone share a minimal repro?

What bundler or framework are you using to import the library (e.g. nextjs, webpack, vite, etc)? I'm guessing that something isn't being imported right.

[holdenmatt]

Closing for now, but feel free to re-open if you can share a way to repro the issue.

[simonprovost]

@stefanonardo @cspence001 any clues ? I am having the issue!

React.JS plain and React.JS with TypeScript – Minimal example shows this error !

[simonprovost]

@holdenmatt Here is a minimal reproducible example showing the possibility to upload a CSV file or a DuckDB database, and show the first row of it. Very easy one. In React.JS TypeScript templated.

First question, why would we get a getJsDelivrBundles issue here you reckon? What would be the changes needed please?

Second, would that be possible without TS or is TS/TSX needed to work with duckdb-wasm-kit?

Last, could we really not pre-load-in-memory a database from the public folder in local dev during the init? I feel a little bit confused about that, as @tobilg mentioned something like that it is not possible: https://github.com/holdenmatt/duckdb-wasm-kit/issues/18#issuecomment-2642045449 ? Yet: https://github.com/holdenmatt/duckdb-wasm-kit/pull/2

Cheers!

––––––––

Error Being: Error loading DuckDB: duckdb.getJsDelivrBundles is not a function

–––––––– Code for reproducing:

import React, { useEffect, useRef } from 'react';
import {
  useDuckDb,
  runQuery,
  initializeDuckDb,
  insertFile,
} from 'duckdb-wasm-kit';

const App: React.FC = () => {
  const { db, loading, error } = useDuckDb();

  useEffect(() => {
    initializeDuckDb({
      debug: true,
      config: {
        query: { castBigIntToDouble: true },
      },
    });
  }, []);

  const csvInputRef = useRef<HTMLInputElement>(null);
  const duckdbInputRef = useRef<HTMLInputElement>(null);

  const handleLoadCSV = async (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const file = event.target.files?.[0];
    if (file && db) {
      try {
        await insertFile(db, file, 'csv_table');
        const arrowTable = await runQuery(
          db,
          'SELECT * FROM csv_table LIMIT 10'
        );
        const rows: any[] = [];
        for (let i = 0; i < arrowTable.numRows; i++) {
          const row = arrowTable.get(i);
          if (row) rows.push(row.toArray());
        }
        console.log('CSV file loaded. First 10 rows:', rows);
      } catch (err) {
        console.error('Error loading CSV file:', err);
      }
    }
  };

  const handleLoadDuckDB = async (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const file = event.target.files?.[0];
    if (file && db) {
      try {
        const buffer = await file.arrayBuffer();
        await db.registerFileBuffer(file.name, new Uint8Array(buffer));
        await db.open({ path: file.name, query: { castBigIntToDouble: true } });
        const arrowTable = await runQuery(db, 'SELECT * FROM range(10)');
        const rows: any[] = [];
        for (let i = 0; i < arrowTable.numRows; i++) {
          const row = arrowTable.get(i);
          if (row) rows.push(row.toArray());
        }
        console.log('DuckDB file loaded. Test query rows:', rows);
      } catch (err) {
        console.error('Error loading DuckDB file:', err);
      }
    }
  };

  if (loading) return <div>Loading DuckDB...</div>;
  if (error) return <div>Error loading DuckDB: {error.message}</div>;

  return (
    <div style={{ padding: '20px' }}>
      <h1>DuckDB WASM in React (React 18)</h1>
      <p>
        DuckDB is ready. Use the buttons below to load a CSV file or a DuckDB
        file.
      </p>
      <div style={{ margin: '10px 0' }}>
        <button onClick={() => csvInputRef.current?.click()}>
          Load CSV File
        </button>
        <input
          type="file"
          accept=".csv,.arrow,.parquet"
          ref={csvInputRef}
          style={{ display: 'none' }}
          onChange={handleLoadCSV}
        />
      </div>
      <div style={{ margin: '10px 0' }}>
        <button onClick={() => duckdbInputRef.current?.click()}>
          Load DuckDB File
        </button>
        <input
          type="file"
          accept=".duckdb"
          ref={duckdbInputRef}
          style={{ display: 'none' }}
          onChange={handleLoadDuckDB}
        />
      </div>
      <p>Check the browser console for query output after loading a file.</p>
    </div>
  );
};

export default App;

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@duckdb/duckdb-wasm": "^1.29.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "duckdb-wasm-kit": "^0.1.38",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

–––––––– Versioning & machine

• npm version: 10.9.2
• yarn version: 1.22.22
• OSX: Sequoia 15.3

–––––––––

@holdenmatt Note that if we find the source of the problem which I hope is on my end I am very happy to provide a quick PR with like example demo app for any new comers !

[tobilg]

I recommend you clean up your project. Using a mixture of React 18/19, more or less deprecated CRA, outdated Typescript etc. Create a new Vite+React project with defaults… I linked my example implementation in the other issue.

I have multiple websites running duckdb-wasm-kit w/o problems.

[simonprovost]

Allright ! I'll follow the Vite + React then for sure, will keep you updated! Thanks for the help

[simonprovost]

@tobilg Thanks for the tips! With Vite+React (TS & JS) it works without problem!

Maybe I am wrong but this could be mentioned in the readme? Should I PR an example simply for people to easily run?

Thoughts @holdenmatt ? Do not wanna intrude but took me a couple of message and the huge help of @tobilg – yet it should not be the case right? Or should I have assumed that it is with Vite + React that I should have ran the package? Confusing right!

Cheers,