Workaround with create-react-app

[kdabir]

Hi,

Please pardon me for my limited frontend tech knowledge. However, when I try to add alasql to an app created with create-react-app, it just fails. Since I don't want to eject CRA at this stage, I cannot configure webpack config. I suppose lot of people use CRA these days. So this would be blocker for all of those.

Following are the simple steps to reproduce the issue:

$ npm install -g create-react-app

$ create-react-app my-app

$ cd my-app/

$ npm install --save alasql

Add the following import to src/App.js

import alasql from 'alasql';

When I run the app with following command $ npm start, I see following error

Failed to compile.

./node_modules/alasql/dist/alasql.fs.js
Module not found: Can't resolve 'react-native-fs' in '<path-to-app>/node_modules/alasql/dist'

The app just doesn't work.

1. What are the workarounds to get alasql work well with CRA without ejecting CRA or having to use globals (defeats purpose of other tooling).
2. As an enhancement, shouldn't alasql work with minimal module dependencies (not depend on things like react-native) and user should add extra modules as need be. Or create a specific dist for browser, may be calling it alasql-browser, which works well with npm dependencies.
3. It would be great if we can add solution to this in README or wiki somewhere (I can help with PR if I get a solution)

[kdabir]

The current working solution with create-react-app without ejecting it is:

Add the following line in public/index.html of CRA app

<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.4.1/alasql.min.js"></script>

and instead of an import, use alasql as follows:

const alasql = window.alasql;

The problems being:

1. having to manage a script and its version by hand (instead of using npm) and
2. not able to use es6 imports.

[mathiasrw]

I will close this issue. Please reopen if this does not help you out.

[reviewher]

@mathiasrw this can be fixed in package.json: set "browser": "./dist/alasql.js". If that is set, tools like webpack and browserify will use that entry point rather than the nodejs "main" (with no additional hacks).

@kdabir the url https://unpkg.com/alasql/dist/alasql.min.js will always reference the latest version (and that's true for any npm module -- unpkg is a great service)

[mathiasrw]

@reviewher This is awesome. Thank you so much!

[kdabir]

@mathiasrw so @reviewher's suggestion will truly close the issue, which I guess is already done in acf90aa. Waiting for 0.4.2 now :). Thanks for the quick fix.

And thanks @reviewher for the suggestion 👍

[mathiasrw]

0.4.2 is out now: http://unpkg.com/alasql/dist/alasql.min.js

[kdabir]

Just tried out, works like a charm. Thanks again @mathiasrw & @reviewher.

[karan-chauhan]

I can't able to make my header bold. I am using XLSX in my react app.

[Co0olCat]

Re vue (working solution): https://gist.github.com/kiichi/76583589ed2a92775ef0607f89d42157

[peterbe]

I too had to opt for this hack in my create-react-app:

// Necessary hack due to https://github.com/agershun/alasql/issues/930
// import alasql from "alasql";
import alasql from "../../../node_modules/alasql/dist/alasql.min.js";

I'm hoping v2 will solve these problems.

[mathiasrw]

It will - But it would be good to solve in the current version too. Maybe as a ES module where you select if its node or browser you import. Inputs welcome to how its done the best way.

[mathiasrw]

@peterbe Have a look at #767 (comment)

[psecuresystem]

Pls how can I fix this issue for create-next-app

[mathiasrw]

@psecuresystem Do you have an ida about how to solve it for create-next-app?

[bobics]

In case anyone else runs into this on Next.js (e.g. Next.js 14), the AlaSQL readme mentions you can set module.noParse in Webpack. see:

alasql/README.md

Lines 435 to 444 in de63f66

	##### module.noParse
	As of AlaSQL 0.3.5, you can simply tell Webpack not to parse AlaSQL, which avoids all the dynamic `require` warnings and avoids using `eval`/clashing with CSP with script-loader.
	[Read the Webpack docs about noParse](https://webpack.js.org/configuration/module/#modulenoparse)
	```js
	...
	//Don't parse alasql
	{module:noParse:[/alasql/]}
	```

e.g. in your next.config.mjs you can do:

const config = {
  webpack: function (config) {
    Object.assign(config.module, {
      noParse: [/alasql/]
    });
    return config;
  },
};