how to use webpack to run it on browser

[pradeepa-m]

I have a very simple node module, in which i have used websql node package. below is the code:

productwebsql.js: const openDatabase = require('websql'); const db = openDatabase('mydb.db', '1.0', 'description', 1);

module.exports = { init: function( callback ){ var sqlQuery = "CREATE TABLE IF NOT EXISTS PRODUCT( CODE TEXT, DESCRIPTION TEXT, PRICE TEXT )"; db.transaction( function( tx ){ tx.executeSql( sqlQuery, [], function( data ){ console.log( 'Query: ' + sqlQuery + ' PRODUCT table created.' ); if( callback != undefined ) { callback(); } }, function( error ){ console.error( error, "error while executing " + sqlQuery + " : message : " + error.message ); return true; } ); }); }, insert: function( productArray, callback ){ if( productArray ) {
var sqlQuery = "INSERT OR REPLACE INTO PRODUCT( CODE, DESCRIPTION, PRICE ) VALUES( ?, ?, ? )"; var args = productArray || []; for ( var argumentCounter = 0; argumentCounter < args.length; argumentCounter++ ) { if(args[ argumentCounter ] == undefined ||args[ argumentCounter ] == null ){ args[ argumentCounter ] = ""; } if(isNaN(args[ argumentCounter ])){ args[ argumentCounter ] = args[ argumentCounter ].toString(); } } db.transaction(function(tx){ tx.executeSql( sqlQuery, args, success, error ); });

        function success( tx, result ){
            console.log("Query : " + sqlQuery );
            console.log( "Data inserted successfully" );
            if( callback != undefined )
            {
                callback();
            }
        }
        function error( tx, error ){
            console.error( error, "error while executing " + sqlQuery + " : message : " + error.message );
            return true;
        }
    }
    else
    {
        console.log( 'Please provide the product data' );
        return true;
    }
},
getAllProducts: function( callback ){
    var sqlQuery = "SELECT * FROM PRODUCT";
    db.transaction(function(tx){
        tx.executeSql( sqlQuery, [], success, error );
    });

    function success( tx, result ){
        console.log( "Query : " + sqlQuery );
        callback( result.rows );
    }

    function error( tx, error ){
        console.error( error, "error while executing " + sqlQuery + " : message : " + error.message );
        return true;
    }
}

}

and using webpack I am trying to bundle it with below webpack.config.js: const path = require( 'path' ); const webpack = require( 'webpack' );

module.exports = { target: 'web', entry: './productwebsql.js', output:{ path: path.resolve( __dirname, 'dist' ), filename: 'product-webpack.bundle.js', library: 'product'
}, optimization: { minimize: true }
} my package.json is as below: { "name": "productwebsql", "version": "1.0.0", "description": "", "main": "productwebsql.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "MIT", "dependencies": { "websql": "^1.0.0" }, "devDependencies": { "webpack": "^4.43.0" } }

When I run webpack command, it gives an error "Module not found: Error: Can't resolve 'websql'" To fix that issue, I modified the webpack.config.js with an entry externals:{ 'websql': 'websql' } and the error disappeared but when I try to include that bundle.js in my hrml it says "Uncaught ReferenceError: websql is not defined".

I am sure, I am missing or following something wrong. Need some help in fixing this issue or a pointer.

thanks in advance.

[brettz9]

This package is specific to Node. If you are looking to continue using SQL in the browser, see https://github.com/agershun/alasql . This will let you write SQL queries in the browser.

(Or if you instead wish to switch to using web standard IndexedDB APIs in older browsers that support WebSQL but not IndexedDB--or to use IndexedDB on Node--you can see https://github.com/indexeddbshim/indexeddbshim. )

[pradeepa-m]

Thank you for the reply. The intention behind trying the above approach was that I will write the entire logic in my node module and it can used in both back-end(nodejs) and front-end(on browser using the web pack bundled js file). Can I achieve this using alasql or indexeddbshim?

[brettz9]

IndexedDBShim will work isomorphically as you describe (but again it is using IndexedDB syntax not SQL).

alasql advertises support for browser and Node, so I would think so. You need to do the research and look into its docs to find out for sure.

Of course, in either case, this doesn't provide synchronization between client and server--it just lets the same code be usable in either environment--assuming you are requiring the proper file first in Node or the browser.

As this is now a support question and unrelated to this repo, I think you should ask any further questions on StackOverflow (and close the issue).

[pradeepa-m]

Thank you