Alasql: 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 acf90aa698d4a0e8f58771155bd79a88dc6dab35. 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 https://github.com/agershun/alasql/issues/767#issuecomment-433517526