How to use zip.js with create-react-app?

[JosePereira97]

When i load the package using (import * as ZIP from "@zip.js/zip.js") is gives me this error

./node_modules/@zip.js/zip.js/lib/core/codecs/codec-pool-worker.js 85:72
Module parse failed: Unexpected token (85:72)
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) {

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

| workerData.worker.addEventListener(MESSAGE_EVENT_TYPE, onMessage, false);
| workerData.interface = {

i dont know why it happens i tried to read some Q&A in the repository, but i didnt find nothing. Do you guys know the origin of this error? And how to resolve it?

[gildas-lormeau]

create-react-app uses webpack 4 under the hood to build the application and webpack 4 does not fully support web workers without an additional loader.

To fix this issue, 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: /@zip\.js\/zip\.js\/lib\/core\/codecs\/codec-pool-worker\.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",

[huangminsky]

If a vue app ,not a react app
Is the same NPM package applicable ？

[puxiao]

You can also use @craco/craco .

1. run yarn add @craco/craco --dev

2. run yarn add @open-wc/webpack-import-meta-loader --dev

3. create a file named craco.config.js in the root folder of your project and paste the following content:

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

4. edit you package.json file and replace:

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

[abduraufsherkulov]

You can also use @craco/craco .

1. run yarn add @craco/craco --dev
2. run yarn add @open-wc/webpack-import-meta-loader --dev
3. create a file named craco.config.js in the root folder of your project and paste the following content:

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

4. edit you package.json file and replace:

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

Did it work tho? I am using craco and craco-less is not working after using webpack options.

[puxiao]

Yes, it can work.
I have an example: https://github.com/puxiao/cesium-issues-9790