Sheetjs: _fs.readFileSync is not a function

[mikechabot]

Having difficulty reading XLSX files in the browser.

1. npm install --save xlsx
2. Ensure and xlsx folder is present in /node_modules
3. In my JS file, add the following:

import XLSX  from `xlsx`;
var workbook = XLSX.readFile('../../data/test.xlsx');

Immediately hit the error:

xlsx.js:11387 Uncaught TypeError: _fs.readFileSync is not a function

And yet if I transition the import statement to something more ES5 friendly (require), the application can't even locate the XLSX library anymore, which is confusing because it's _in_ /node_modules:

if(typeof require !== 'undefined') XLSX = require('xlsx');
var workbook = XLSX.readFile('../../data/test.xlsx');

Immediately hit the error:

my-test-file.jsx:55 Uncaught ReferenceError: XLSX is not defined

I added the following to my webpack per some previous open issues, however I didn't see a decent explanation for why this is required:

resolve: {
    extensions: ['', '.js', '.jsx', '.json']
},
node: {
    fs: 'empty'
},

[ArnieGA]

Same here. I just posted a reply on the original thread (#285) because I'm having exactly the same issue as you.

[arirawr]

Watching...I have the same issue.

[arirawr]

So I'm thinking fs just doesn't work with client side JS (and thus with webpack): https://github.com/webpack/webpack/issues/411

[mikechabot]

Yeah, this code is getting hit in the browser, so access to the filesystem is a no-go. I had hoped webpack might work some magic and stuff the contents in bundle.js. That said, would need a webpack loader for .xls* to even get at it, but if the dependency is still on fs then it might be a moot point. Alternative is to just spin up a simple Express server and move the work over there.

[ArnieGA]

The xls/xlsx loader approach is very interesting...
I haven't been able to find a loader, so in the meantime I've tried to grab the file using a user's action which is completely legal, by using HTML5's input Tag.
I'm thinking somewhere along this:

<input type="file" onChange={this.excelWork.bind(this)} accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"/>
    excelWork(e){
        let file = e.target.files[0], reader = new FileReader(), self = this;
        if (file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || file.type === "application/vnd.ms-excel"){
            reader.onloadend = function(event){
                //(...)
               // This part would have to be figured out O_o
            };
            reader.readAsArrayBuffer(file);
        }
    }

Problem is that parsing that...wow I gotta be real honest, don't even know where to start; never done that before.

[arirawr]

I'm taking the Express server route now, giving up on doing this client side.

[whytheday]

If you want to load the file in the browser in the manner you would like, than it looks like you need to use ajax to get the binary data of the file and then XLSX.read would be the function you would use. There is an example on the main readme: https://github.com/SheetJS/js-xlsx#parsing-workbooks