Hello Stephen,

Thank you for your patience and understanding while I'm going though this. I will update you again once I have more significant progress on the task.

Hi Stephen,

Meanwhile could you update me if you did worked around the "No locale data has been loaded" error and how, and what is the latest issue you are running into.

Hristo

Hello Stephen,

I investigated further and found out we need to pass this.IntlPollyFill.__addLocaleData to resolve the No Locale Data error (this is done in the Infragistics.documents.core.js). Then a saveAs is not defined error will occur, so we will need to put saveAs on the global scope as well:

global.saveAs = require('./ignite/filesaver').saveAs;

I am attaching the sample I worked with.

Please let me know if you have further questions on the matter, I will be glad to help.

Can you please supply the webpack.config file you used as well as the package.json file?  I'm using typescript as well, so I want to make sure I've got everything setup similarily

Sure. Please find attached both package.json and webpack.config.js that were used.

So I'm back to the uncaught Class error.  I used the expose-loader because I can't figure out with typescript how to get the global require statements to work.  I'm actually using import statements in my TS file like this:

import "blob";

import "intl";

import "filesaver";
import "./vendor/infragistics.documents.core";
import "./vendor/infragistics.excel";
import "./vendor/infragistics.gridexcelexporter";

and the expose:

{ test: require.resolve("intl"), loader: 'expose-loader?Intl' },
{ test: require.resolve("filesaver"), loader: 'expose-loader?saveAs' }

Does the 'imports-loader' do the magic?

Thanks for summarizing all of this so that other community members benefit as well!

So I hope you guys (infragistics) go through and update your source for all this to better handle the references and update your dependencies because I think that'd help with the webpack'ing.

Here's the bare minimum I think I've found to accomplish exporting in webpack:

webpack.config.js

module: {
rules: [

{
test: require.resolve("intl"),
loader: "imports-loader?this=>window&define=>false"
},
{
test: require.resolve("./app/scripts/vendor/infragistics.util"),
loader: "imports-loader?this=>window&define=>false"
},
{
test: require.resolve("./app/scripts/vendor/infragistics.documents.core"),
loader: "imports-loader?this=>window&define=>false"
}

]}

These are the imports in my TS file that does exporting:

import * as filesaver from "file-saver";

import "./vendor/infragistics.util";
import "./vendor/infragistics.documents.core";
import "./vendor/infragistics.excel";
import "./vendor/infragistics.gridexcelexporter";

and in the constructor of my TS class I have:

window.saveAs = filesaver.saveAs;

where I have a type definition file that declares on the window object the saveAs function:

interface Window
{

saveAs: Function;

}

And of course don't forget about directly including the jszip.js file in your html.

Hi Stephen,

I am glad this finally worked !

I also had the issue with saveAs not defined, so as mentioned on my previous posts another resolution is to put saveAs on the global scope as well:

global.saveAs = require('./ignite/filesaver').saveAs;

I think the information here is enough for other members of our community to benefit from, since I have attached the sample I worked with and as it turned out we have been facing the same exact issues that will most probably everyone will face when implementing similar webpack scenario.

Thank you for your cooperation and let me know If you have any other questions, I will be glad to help.

Finally!  with loading that JSzip directly, I then had an issue where saveAs wasn't able to be put into global scope right on the window object, so i had to update the excel exporter js file to call saveAs like 'filesaver.saveAs', and then it all worked.  I'll see if I can clean up my webpack/ts files and post them here as an example too.

Hello Stephen,

The "Uncaught Class {__message: null, __innerException: null}" error is a result of the JSZip library (which is embedded in our source) to not be available in the global scope. You should be able to resolve this by explicitly referencing JSZIp either as I did the conventional way:  <script src="jszip.js"></script> or using import: import 'JSZip'.

Apart from this the snippet you send seems correct and I am expecting it to work. Please try to explicitly reference JSZip, so that is available and let me know if this resolved your issues.

I am looking forward to hearing from you.