Issues with zip.js, Create-React-App and Jest

[bsmilling]

Hi,

I have a project created with Create-React-App (CRA) in which I am trying to implement an unzip function.

I have gotten the unzip code itself to work, however I've got problems with getting it to work simultaneously in my Jest unit tests and in the browser. The issue is with the import of zip.js, I can't seem to find a way to import, that works simultaneously i both scenarios.

If I import it as written in the documentation,

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

I can get it to work in the browser, but it won't run in my unit tests with the following error:

 /home/xxx/code/zipjs-sample/node_modules/@zip.js/zip.js/index.js:29
    import Deflate from "./lib/core/codecs/deflate.js";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 |
    > 2 | import * as zip from '@zip.js/zip.js';
        | ^
      3 | // import * as zip from '@zip.js/zip.js/dist/zip-full';
      4 |
      5 | /**

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/zip/unzip.js:2:1)

If I import the build version from the dist-folder like this:

import * as zip from '@zip.js/zip.js/dist/zip-full';

It works in my tests, but then It get the following error in the browser:

Compiled with problems:X

ERROR in ./src/zip/unzip.js 12:24-37
export 'ZipReader' (imported as 'zip') was not found in '@zip.js/zip.js/dist/zip-full' (module has no exports)

ERROR in ./src/zip/unzip.js 16:27-41
export 'TextWriter' (imported as 'zip') was not found in '@zip.js/zip.js/dist/zip-full' (module has no exports)

I have made a small sample project. If you clone it and run npm start and npm test, it will work in the browser, but the tests will fail. If you then swap in the commented out imports in the files within the src/zip, it will work in the unit tests, but not in the browser. For testing in the browser, just upload a random zip file, ie. the one located in src/zip, and the page will show you its contents.

Can anyone point me in the direction of an import or a configuration change, that will work in both scenarios? 🙏

[gildas-lormeau]

I don't know Jest so I'm not sure this is the correct answer. It looks like you have to use transformIgnorePatterns, I guess this would work: "transformIgnorePatterns": ["/node_modules/(?!@zip\.js/)"].

See here for more info: jestjs/jest#11753

Edit: Otherwise importing zip-fs-full-es5 might work.

[bsmilling]

Looks like adding transformIgnorePatterns had an effect, but now I get another error instead:

    /home/xxx/code/zipjs-sample/node_modules/@zip.js/zip.js/lib/zip-fs.js:135
      baseURL = import.meta.url;
                       ^^^^

    SyntaxError: Cannot use 'import.meta' outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (node_modules/@zip.js/zip.js/index.js:37:1)

Sample repo is updated with config change.

I also tried importing -es5 like you suggests, but that results in the same errors as before.

[gildas-lormeau]

The import.meta issue is due to an obsolete builder, see https://github.com/gildas-lormeau/zip.js/search?q=import.meta.url&type=discussions. This issue does not exist with Webpack 5 or rollup for example.

[bsmilling]

The latest version of create-react-app (CRA) uses Webpack 5. I verified that I am using the latest CRA version, and confirmed within the node_modules folder, that the installed webpack version is 5.70.0.

[gildas-lormeau]

My bad, I read the error message too quickly. This error is indeed not related to an obsolete builder. It is strange though because the code of zip.js is only composed of modules. Therefore, it doesn't make sense.

[bsmilling]

If I import @zip.js/zip.js/lib/zip-no-worker-inflate like Philipp does here, I'm able to get it to work in both browser and tests.

Other than the obviuos, if we update and you rearrange files in the project, do you se any issues in that import?

I should note, that even though i didn't disable web workers in the sample project, I have done so in our real project, and we only need to do unzipping in our project.

[bsmilling]

Apparantly I was a bit to quick. While this import does work in my sample project, it doesn't work in my actual app, it results in the same error as I got originally. I haven't been working on that part of the project for a couple of days, so didn't get the opportunity to check before today.

[pillsilly]

For the solution zip.js/zip.js/lib/zip-no-worker-inflate :
In my case there's error about " TransformStream (which is Web API) not defined";
Then I use import {BlobWriter} from "@zip.js/zip.js/lib/core/io"; to avoid it from trying to compile code which contains WebAPI that jsdom hasn't handled yet.

Hope it could help for some others.

[gildas-lormeau]

Note also that upgrading to Node.js v18 should fix this kind of issue.

[gildas-lormeau]

I was able to go a bit further (I guess?) by following the procedure described here: https://jestjs.io/docs/ecmascript-modules

Here is my package.json file (see scripts.test and jest.transform). I also had to set type to module to make it work.

{
  "name": "zipjs-sample",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@zip.js/zip.js": "^2.4.7",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "node --experimental-vm-modules node_modules/.bin/jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "transform": {}
  },
  "devDependencies": {
    "jest": "^27.5.1"
  }
}

Now Jest can run the tests (but they fail).