How do I use SQL.js in a React app?

[AutistiCoder]

Hello,

I am trying to use SQL.js within an existing React app.

I tried using the sql-js NPM package and loading SQL.js like so:

import initSqlJs from "sql.js";

await initSqlJs({
    locateFile: (file) => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/${file}` // this was in an async function
  });

and got this error at runtime:

./node_modules/sql.js/dist/sql-wasm.js:94:15
Module not found: Can't resolve 'fs'

I saw the demo repository but can't make heads or tails of it!

Any help would be greatly appreciated.

[inayayousfi]

Hey!
No worries—this is a really common issue when setting up sql.js with React. The error
Module not found: Can't resolve 'fs'
just means that the Node.js version of the library got imported, which looks for things like the filesystem module (fs) that only exist in Node, not the browser.

The trick is simply to use the WebAssembly version that’s made for browsers! Here’s how you do it:

import initSqlJs from "sql.js/dist/sql-wasm.js";

const SQL = await initSqlJs({
  locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/${file}`
});
// Now you can use new SQL.Database() etc.

If you’re curious how this fits into a real codebase, here’s a snippet from my own project (with some real logic around it):

import initSqlJs from "sql.js/dist/sql-wasm.js";
// ...other imports

let SQL, db;

export async function initDatabase() {
  SQL = await initSqlJs({
    locateFile: file => chrome.runtime.getURL("sql-wasm.wasm"),
  });
  // then new SQL.Database(), etc.
}

And if you want to dive even deeper, here’s a link to my full example file.

So don’t worry—this isn’t a bug in the package, just a detail with how JavaScript modules work between Node and the browser.
Switch to the WASM build and you’ll be good to go.

Feel free to ask if you run into any more issues—happy hacking!