How to use alasql with webpack

[elangoRamar]

Problem: I am trying to use alasql with webpack, but i am keeps on getting error. i followed steps mention in alasql + webpack but no luck.

I am using raw-loader to load the script as script-loader is no longer maintained,

Versions: "alasql": "^4.2.3", "raw-loader": "4.0.2", "webpack": "^4.41.0", "webpack-cli": "^3.3.9"

webpack config:

{ test: /\.js$/, use: [ { loader: 'raw-loader', options: { esModule: false, }, }, ], },

In code,

// @ts-ignore
import alasql from 'raw-loader!alasql'

Error: TypeError: (0 , raw_loader_alasql_1.default) is not a function

[mathiasrw]

From the AlaSQL bot:

---

It looks like the issue you're facing is related to the way you're importing alasql with raw-loader in a Webpack setup. The error TypeError: (0 , raw_loader_alasql_1.default) is not a function suggests that the import isn't being handled correctly, resulting in alasql not being recognized as a function. Let's address this step-by-step:

1. Check the raw-loader Configuration: Ensure that raw-loader is correctly set up in your Webpack configuration. Given that script-loader is deprecated, using raw-loader is a good choice, but it's important to make sure it's configured properly to handle .js files.

2. Importing AlaSQL Correctly: When using raw-loader, the imported module is treated as a raw string, not as a JavaScript module. This could be the reason why alasql is not recognized as a function. To resolve this, you might need to adjust the way you're importing alasql.

3. Alternative Approach: If the current setup continues to cause issues, consider an alternative way of integrating alasql with Webpack. One option could be to use the standard import statement (import alasql from 'alasql') and let Webpack handle the module resolution without using raw-loader.

Based on your setup, here are some steps to try:

• Revise Webpack Config: Modify the Webpack configuration to handle alasql differently. You might not need to use raw-loader for alasql.js. Instead, try excluding alasql from this rule and use a standard import.

• Standard Import: Change the import statement in your code to a standard ES6 import:

  import alasql from 'alasql';

• Testing and Debugging: After making these changes, test the build process and check for any errors. If errors persist, it could be useful to create a minimal reproduction of the issue to isolate the problem.

If these steps don't resolve the issue, you might want to delve deeper into the specific integration of alasql and raw-loader in a Webpack environment, as there might be nuances specific to this library and loader combination.

[elangoRamar]

Hi @mathiasrw , I have tried importing alasql like you mentioned and removed the raw loader, but when i try to build the project using webpack, i am getting below error.

Basically i am trying to create a build for browser. It seems the error is coming from the below part of the code in alasql.min.js

Webpack is not able to parse this part, do we need any specific webpack loader to fix this issue?

[mathiasrw]

can you try to include the alasql.js instead of the alasql.min.js ?

You might have to change the path to './node_modules/alasql/dist/alasql.js'

That makes the debugging easier...

[elangoRamar]

@mathiasrw , I couldn't include the alasql.js file and i don't see any issue with the alasql.js code, but when i try to create a webpack browser bundle it's picking up the minified version of alasql. When the webpack parses the alasql.min.js file, it finds the above mentioned issue.

I see that alasql is configured alasql.min.js for browser.

https://github.com/AlaSQL/alasql/blob/deae65115b273d49e6d7ecf9f6f85290fc9fb9f1/package.json#L10C2-L10C34

is it possible that there is an issue with minification of alasql?

[mathiasrw]

Its not impossible, but we are using esbuild with the --minify flag so it should be pretty battle tested.

May I propose that you go into node_moduls/alasql/dist and copy the content of alasql.js into alasql.min.js ? This way it will be easier to identify if the minifaction is to blame, and if not, what code exactly is not working.

[elangoRamar]

Thanks @mathiasrw Found the issue.

Actually i am using the webpack to bundle the project with alasql.min.js file. And i am using this bundle in the android webview to call JS functions.

it shows error on this line, #doSearch(databaseid, params, cb) { it seems the android JS parser was not able to understand the '#' private symbol. after removing the symbol it started working.

I think this is not something related to the alasql, so i will close this issue.