Uncaught RangeError: Maximum call stack size exceeded

[realrecordzLab]

I have a working browser extension that use JSZip to create and read zip files. I want to migrate it to fflate but I have a problem while I'm trying to implement the library. I get this error inside the console Uncaught RangeError: Maximum call stack size exceeded when I try to create a zip file that will include multiple files. While in JSZip I was able to add each single file to an archive using the zip.file() function, it's not clear for me how I can proceed with this library. At the moment I have this code in my vue methods

processFiles() {
      this.isProcessing = true;
// this.files is an array that hold dropped files from the user that are in the e.dataTransfer.files 
      this.files.forEach( (f) => {
        let filename = f.name
        zip({filename: f},{consume: true, level: 9, mem: 12}, (err, data) => {
          if(err){ 
            console.log(err);
            return;
          }
          console.log(data);
        });
      });
}

As you can see I need to loop an array of files and add each file to the archive before give it to the user. I'm using the async api, Is possible to have an example of how to manage this?

[pippo111]

Check out demo site: https://101arrowz.github.io/fflate/

You cannot add File object directly, you have to read files first. This is example with Promise, so you can easily use it with async/await:

function readFile(file: File) {
  return new Promise<Uint8Array>((resolve, reject) => {
    const reader = new FileReader();

    reader.onloadend = () => {
      resolve(new Uint8Array(reader.result as ArrayBuffer));
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

Then you have to create archive structure, for example:

const archiveStruct: AsyncZippable = {}
for (const file of files) {
    const fileBuffer = await readFile(file);
    archiveStruct[file.name] = fileBuffer;
}

Then you can zip all files, like so:

fflate.zip(
      archiveStruct,
      { consume: true, level: 9 },
      (err, out) => {
        if (err) {
          console.log("error", err);
          return;
        }

        console.log(out); // this is your archive buffer
      }
);

[101arrowz]

Just wanted to mention that instead of using any, you can use the AsyncZippable type exported by fflate with TypeScript, which verifies that your ZIP call will work at compile time.

[realrecordzLab]

Check out demo site: https://101arrowz.github.io/fflate/

You cannot add File object directly, you have to read files first. This is example with Promise, so you can easily use it with async/await:

function readFile(file: File) {
  return new Promise<Uint8Array>((resolve, reject) => {
    const reader = new FileReader();

    reader.onloadend = () => {
      resolve(new Uint8Array(reader.result as ArrayBuffer));
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

Then you have to create archive structure, for example:

const archiveStruct: any = {}
for (const file of files) {
    const fileBuffer = await readFile(file);
    archiveStruct[file.name] = fileBuffer;
}

Then you can zip all files, like so:

fflate.zip(
      archiveStruct,
      { consume: true, level: 9 },
      (err, out) => {
        if (err) {
          console.log("error", err);
          return;
        }

        console.log(out); // this is your archive buffer
      }
);

I've modified a bit the code because I'm not using typescript but it seems working fine. I've created a method to read each single file and replaced the forEach() loop with for() as you have suggested. Just the last thing, I need to read the file also if I want to unzip it's content?

[101arrowz]

Yes, you need to do the same process of readFile on the File object before passing it into zip or zipSync. fflate works only on Uint8Array objects, nothing else will work properly.

[realrecordzLab]

Ok, perfect. It will be helpful to add some example into documentations for situaion like the one of this thread. Thank you for the help, I've replaced JSZip with this library and works like charm!

[101arrowz]

Thanks for the advice; I've added a FAQ to the Wiki section.

[realrecordzLab]

There is something that will not work in the libray, while in dev mode the code like the one provided will work without any problem, when I create the production build it will stop working. This is the error logged in console

Uncaught TypeError: Cannot read property 'length' of null
    at A (chunk-vendors.64883a9e.js:6)
    at chunk-vendors.64883a9e.js:6
    at Worker.s.onerror (chunk-vendors.64883a9e.js:6)
A @ chunk-vendors.64883a9e.js:6
(anonymous) @ chunk-vendors.64883a9e.js:6
s.onerror @ chunk-vendors.64883a9e.js:6
error (async)
r @ chunk-vendors.64883a9e.js:6
X @ chunk-vendors.64883a9e.js:6
re @ chunk-vendors.64883a9e.js:6
ce @ chunk-vendors.64883a9e.js:6
h @ chunk-vendors.64883a9e.js:6
Ae @ chunk-vendors.64883a9e.js:6
(anonymous) @ write-zip.896bce5d.js:1
u @ chunk-vendors.64883a9e.js:8
(anonymous) @ chunk-vendors.64883a9e.js:8
(anonymous) @ chunk-vendors.64883a9e.js:8
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
Promise.then (async)
a @ chunk-vendors.64883a9e.js:1
s @ chunk-vendors.64883a9e.js:1
(anonymous) @ chunk-vendors.64883a9e.js:1
(anonymous) @ chunk-vendors.64883a9e.js:1
processFiles @ write-zip.896bce5d.js:1
(anonymous) @ write-zip.896bce5d.js:1
(anonymous) @ chunk-vendors.64883a9e.js:6
Ee @ chunk-vendors.64883a9e.js:6
Re @ chunk-vendors.64883a9e.js:6
t @ chunk-vendors.64883a9e.js:6

The function processFiles that is referenced in the error is this

    async processFiles() {
      this.isProcessing = true;
      let archiveContent = {};
      for(const file of this.files){
         let fileBuffer = await this.readFile(file);
         archiveContent[file.name] = fileBuffer
      }
      console.log(archiveContent);
      zip(archiveContent, {consume: true, level: 9}, (err, data) => {
        if(err){
          console.log(error);
          return;
        }
        console.log('zip data:',data);
        const chance = new Chance();
        saveAs(new Blob([data.buffer]), `${chance.hash({length: 6})}.zip`);
        this.isProcessing = false;
        this.$router.push({path: '/'});
      });
    },
    readFile(file) {
      return new Promise( (resolve, reject) => {
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onerror = reject;
        reader.onloadend = () => {
          resolve(new Uint8Array(reader.result));
        }
      });
    }

I don't know if this can be cause because webpack will minify all the imported files and the library stop working or because my vue method is async. Any suggestion about fixing?

[101arrowz]

It's extremely difficult to debug what's going on without the production build code. Could you create a pastebin or email it to me? You can also send me the result of that console.log(archiveContent).

[realrecordzLab]

@101arrowz I've opened an issue. After a lot of debug I've discovered that the library will stop working when webpack minify and bundle it for production. The archiveContent variable is filled correctly, the problem is only with the library itself