Sheetjs: AMD support

[gayancliyanage]

I tried to use xlsx.js with require.js but I could not able use in the application. Is there a AMD compatible version of xlsx.js?

[jonahbron]

Agreed, this would be great. Would it be accepted if I submitted pull-request?

Until then, I'm getting it working with a shim.

requirejs.config({
    shim: {
        xlsx: {
            deps: ['jszip'],
            exports: 'XLSX'
        }
    },
    paths: {
        xlsx: '../bower_components/js-xlsx/dist/xlsx',
        jszip: '../bower_components/js-xlsx/dist/jszip',
    }
});

But that alone isn't enough. You also have to attach JSZip to the window for XLSX to actually work.

require(['jszip'], function (jszip) {
    window.JSZip = jszip;
    require(['xlsx'], function (XLSX) {
        // Do something with XLSX
    });
});

JSZip must be loaded and attached to the window _before_ XLSX is loaded.

[jonahbron]

AMD support is especially important for such a large library as this because you really don't want to load it unless it's necessary.

[SheetJSDev]

@jonahbron do you know of a simple way to test if a script supports AMD and CommonJS? A PR for AMD support would be welcome (and maybe a nice little test to ensure that it doesn't break :)

[jonahbron]

@SheetJSDev I'm not sure, I'll try to look at some other projects and see how they do it.

[gayancliyanage]

thanks @jonahbron, worked it out with your suggestion.

[liugui]

@jonahbron Thank you very much.Your solution really helps me! I have tried to solve this problem for a whole afternoon!

[jeremysklarsky]

I was able to get this working with @jonahbron solution as well, but it only worked in my local development environment. When my code was deployed, it stopped working. Any requireJS gurus out there have any insight what might cause this?

var workbook = XLSX.read(data,{type: 'binary'});

Error message:
Uncaught TypeError: Cannot read property 'read' of undefined

I confirmed with a console.log on the previous line that 'data' exists, and using a breakpoint, can see that XLSX is in scope. I am bewildered.

[jonahbron]

@jeremysklarsky I can't explain why you'd get that error, but also be able to see XLSX in the debugger. That error specifically means that XLSX is undefined.

[jeremysklarsky]

@jonahbron - I think I've worked it out.

In my require configs, I defined the path to the library and exported 'XLSX' in the shim as you suggest. I set up my view like this:

define([
  'XLSX'
], function (XLSX) {
});

I only needed to included XLSX in the define block. Because I passed it in and named it the same thing as the exported object from the library, XLSX in scope for my view was written over - and thus undefined. I was able to see it in the browser console because the library's XLSX object is attached to the window.

define([
  'XLSX'
], function () {
});

As long as both XLSX and JSZip where exported and attached to window everything works just fine now.

Oddly, this was not an issue in local development, but when the application was deployed and compiled into a single JS file somehow scope changed and this issue was exposed.

[FlaviuN]

@jeremysklarsky Since you got this to work for you, would you mind sharing a sample of how you attach JSZip to the window?

[SheetJSDev]

The repo currently includes a requirejs demo that replicates http://oss.sheetjs.com/js-xlsx using the r.js optimizer.

[miraclestime]

The current version(0.14.1) already supports the AMD specification, but it has to use 'xlsx' as an alias, and the rest is not valid.