I cannot install sql.js properly

525 Views Asked by At

I'm trying to create a database on the client-side using sql.js and vanilla js. I guess, there is some problem within the installation process. I've done the 'npm install sql.js' and included the CDN. I get this error from the console 'Uncaught ReferenceError: require is not defined'

(BTW this my first question on here, open to suggestions...)

This is pretty much the expression shown in the documentation on their website. I can't make it work, though. Is it because of node.js or something else?

<script type="module">
            const initSqlJs = require('/sql.js');

            const SQL = await initSqlJs({
                locateFile: (file) =>
                    'https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/sql-wasm.js',
            });
            const db = new SQL.Database();

            let sqlstr =
                "CREATE TABLE hello (a int, b char); \
            INSERT INTO hello VALUES (0, 'hello'); \
            INSERT INTO hello VALUES (1, 'world');";
            db.run(sqlstr);
</script>

file tree

2

There are 2 best solutions below

0
On

"require" is when you use Node.

As you using vanilla JS, you should use this, as explained in the github repository (line 3, commented)

const initSqlJs = window.initSqlJs;

0
On

I've done some research considering your comments. I should've used the sql-asm.js instead of sql-wasm.js because I don't need to use 'web-assembly'. Yet, they have sql-wasm.js in their example code, which I still do not understand. Modifying this and not using require() solved my issue.

<meta charset="utf8" />
<html>
    <script src="node_modules/sql.js/dist/sql-asm.js"></script>
    <script>
        config = {
            locateFile: (filename) => `/dist/${filename}`,
        };
        // The `initSqlJs` function is globally provided by all of the main dist files if loaded in the browser.
        // We must specify this locateFile function if we are loading a wasm file from anywhere other than the current html page's folder.
        initSqlJs(config).then(function (SQL) {
            //Create the database
            const db = new SQL.Database();
            // Run a query without reading the results
            db.run('CREATE TABLE test (col1, col2);');
            // Insert two rows: (1,111) and (2,222)
            db.run('INSERT INTO test VALUES (?,?), (?,?)', [1, 111, 2, 222]);

            // Prepare a statement
            const stmt = db.prepare(
                'SELECT * FROM test WHERE col1 BETWEEN $start AND $end'
            );
            stmt.getAsObject({ $start: 1, $end: 1 }); // {col1:1, col2:111}

            // Bind new values
            stmt.bind({ $start: 1, $end: 2 });
            while (stmt.step()) {
                //
                const row = stmt.getAsObject();
                console.log('Here is a row: ' + JSON.stringify(row));
            }
        });
    </script>
    <body>
        Output is in Javascript console
    </body>
</html>