Compile failure in react project

[robindenadel]

I've added zip.js to my project by using yarn add @zip.js/zip.js
yarn install gives no problems, so I can use the library in my class:

import { BlobReader, ZipReader } from '@zip.js/zip.js';
.
.
.
      const reader = new ZipReader(new BlobReader(file));
      const entries = await reader.getEntries();
      if (entries.length == 0) {
        dispatch(
          handleShowPermanentToast({
            message: `The zip cannot be read or contains no entries.`,
            type: 'warning'
          })
        );
      }

when compiling, the following error appears:

Failed to compile

./node_modules/@zip.js/zip.js/lib/core/codecs/codec-pool-worker.js 87:72
Module parse failed: Unexpected token (87:72)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|   if (!workerData.interface) {
>     workerData.worker = new Worker(new URL(workerData.scripts[0], import.meta.url));
|     workerData.worker.addEventListener(MESSAGE_EVENT_TYPE, onMessage, false);
|     workerData.interface = {

What is the best way to solve this?

[gildas-lormeau]

I guess you're using create-react-app to run and build your application. This issue has been discussed here #258 (comment) a few days ago.

I think the best (but not necessarily the easiest) way to solve this issue is to build the app with your own configuration file using webpack 5 or rollup for example.

[robindenadel]

thank you for your answer, i will try that

[bmulcahy]

So how would you use it using what you had in your comment? do you download the zip and place it in your apps public folder or do you use the npm install?

[lagcamgc]

Having the same issue with nuxt, tried importing it in several ways and still does not work, someone was able to do it?

[gildas-lormeau]

@lagcamgc This issue will hopefully be fixed when create-react-app will rely on webpack 5. Meanwhile, a simple way to circumvent the issue is to disable web workers, see below.

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

zip.configure({ useWebWorkers: false });

[at-cf]

@gildas-lormeau I think disabling web worker isn't enough here though, React dev tooling won't "compile" it so the flag has no effect.

./node_modules/@zip.js/zip.js/lib/core/codecs/codec-pool-worker.js 88:74
Module parse failed: Unexpected token (88:74)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   if (!workerData.interface) {
|     try {
>       workerData.worker = new Worker(new URL(workerData.scripts[0], import.meta.url)); 
|     } catch (error) {
|       workerData.worker = new Worker(new URL(workerData.scripts[0], import.meta.url), {

[gildas-lormeau]

@at-cf Indeed, I had forgotten it was not a runtime problem. Note that the version 5.0 of create-react-app should hopefully solve this problem as it adds support for webpack 5 (see facebook/create-react-app#9994).

EDIT: However, if you install the required loader you can fix the build issue, see #258 (comment). You'll still need to run zip.configure({ useWebWorkers: false }); though because it only works in dev mode.

[at-cf]

Is it possible to work around this, like another catch around whatever is throwing (haven't understood the code yet)?

[gildas-lormeau]

@at-cf The version 2.3.12 should hopefully fix the build issue. I did some tests on my end and it seems to work fine.

For the record, you must include the loader @open-wc/webpack-import-meta-loader in your project. You can do this by using for example react-app-rewired and following these steps:

1. run npm install react-app-rewired --save-dev to install react-app-rewired
2. run npm install @open-wc/webpack-import-meta-loader --save-dev to install @open-wc/webpack-import-meta-loader
3. create a file named config-overrides.js in the root folder of your project and paste the following content:

module.exports = function override(config, env) {
    config.module.rules.push({
        test: /\.js$/,
        use: { loader: require.resolve('@open-wc/webpack-import-meta-loader') }
    });
    return config;
}

4. edit your package.json file and replace:

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",

with:

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",

Feel free to reopen the issue if necessary.

[at-cf]

I appreciate your responses here. I won't re-open the issue, but personally I can't use this library. In my case on a larger React team project, I can't really upgrade React version or alter the build scripts for this. Thanks again though.

[gildas-lormeau]

@at-cf No problem, I understand your concern.

Unfortunately, the support of web workers (a feature that is now more than 10 years old) in create-react-app is very poor to stay polite. There are maybe better ways to integrate @open-wc/webpack-import-meta-loader though.