_fs.readFileSync is not a function

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'
},

[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.

[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