import.meta.url and Webpack 5: avoiding absolute paths

[PhilippWendler]

I am using this great library for some time and recently have started using Webpack 5 (via create-react-app). I am interested only in unzipping and I do not want web workers, so I use the following in my code:

import * as zip from "@zip.js/zip.js/lib/zip-no-worker-inflate";

Everything works fine.

However: When I bundle my application with Webpack, Webpack inserts the absolute path to codec-pool-worker.js into the generated code, because that file uses import.meta.url:

zip.js/lib/core/codecs/codec-pool-worker.js

Line 112 in f83228c

url = new URL(workerData.scripts[0], import.meta.url);

This is highly undesired for me, because it leaks my user name and directory names and it leads to the build being different depending on where I build it, for example on my machine vs. in CI (everything else in the build is deterministic and reproducible). From what I understand from the Webpack issue tracker this is by design and not changeable.

I can work around this if I copy codec-pool-worker.js to my app, delete createWebWorkerInterface and tell Webpack to use my copy of the file instead of the original one. However, this is fragile and I of course would prefer to avoid this.

Given that the code in createWebWorkerInterface should not be used anyway when using any of lib/zip-no-worker* AFAIU, I wondered whether there is a possibility for the library to be restructured in a way such that createWebWorkerInterface can be removed by tree shaking when lib/zip-no-worker* is imported? This would also reduce the bundle size by a few bytes, of course. This is why I am raising this here.

Alternatively, if createWebWorkerInterface would be in a separate file this would be easy for me, though I could understand if you don't want to make such adjustments for purely external reasons.

Or does anybody have an idea what else I could do to avoid ending up with the absolute path in my bundle, without having to copy and change the code? I am not really an expert in this.

[gildas-lormeau]

It's fixed in the version 2.4.0.

[gildas-lormeau]

Create a file named zip.js in your project containing the following content:

import { configure } from "@zip.js/zip.js/lib/core/configuration.js";

// remove the 2 following lines if you don't use web workers
import { configureWebWorker } from "@zip.js/zip.js/lib/z-worker-inline.js";
import { terminateWorkers } from "@zip.js/zip.js/lib/core/codec-pool.js";

// uncomment the 2 following lines if you don't use web workers
// import { Deflate } from "@zip.js/zip.js/lib/core/streams/codecs/deflate.js";
// import { Inflate } from "@zip.js/zip.js/lib/core/streams/codecs/inflate.js";

// remove the following line if you don't use web workers
configureWebWorker(configure);

// uncomment the following line if you don't use web workers
// configure({ Deflate, Inflate });

export * from "@zip.js/zip.js/lib/core/io.js";
export * from "@zip.js/zip.js/lib/core/zip-reader.js";
export * from "@zip.js/zip.js/lib/core/zip-writer.js";
export {
  configure,
  // remove the following line if you don't use web workers
  terminateWorkers
};

Then, replace the import(s) of zip.js in your project with this file.

For example, replace:

import * as zip from "@zip.js/zip.js";

with:

import * as zip from "./zip.js";

[Chetanr]

I am only using BlobReader, TextWriter and ZipReader.

how do I do it in that case?

[gildas-lormeau]

If your build tool supports tree shaking, you don't have to care about this. You just have to write the code below.

import { BlobReader, TextWriter, ZipReader } from "./zip.js";

[Chetanr]

Tried that but it

Here is zip.ts file

[gildas-lormeau]

I don't know why it does not work for you. Here is a simple project that works for me: working-example.zip