Issues importing the library in a Nuxt3/Vue3/Vite environment

[patratel]

Hi,

This might be a very basic issue that I'm simply unable to solve (probably due to lack of knowledge of how wasm works). I'm trying to import the modules into my Vue App in order to encode AVIF files and i'm getting the following error

500 Cannot find module 'C:\Users\cab_l\Desktop\Repositories\wsp-3.0\node_modules\@jsquash\avif\encode' imported from C:\Users\cab_l\Desktop\Repositories\wsp-3.0\node_modules\@jsquash\avif\index.js

I did check the node_modules folder and the module is present thus I have no idea why that might be the case.

My code looks like this

./composables/useUtiles.ts

import { encode } from "@jsquash/avif";

  const convertToAvif = (file) => {
    return new Promise(async (res, rej) => {
      console.log("file ", file);
      const avifBuffer = await encode(file);
      console.log("buffer ", avifBuffer);
      res();
    });
  };

I'm guessing that the issue might be related to this step in the readme file that I'm failing to understand how to proceed with

Note: You will need to either manually include the wasm files from the codec directory or use a bundler like WebPack or Rollup to include them in your app/server.

Any help with this would be greatly appreciated

[jamsinclair]

Thanks for reporting this @patratel.

I think this might be related to the vite bundler that Vue uses. If you follow the steps in this part of the README, does it solve the issue?

[CodeF53]

Adding onto this for my experience in Nuxt, I followed the steps you linked in the README.

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  vite: {
    optimizeDeps: {
      exclude: ['@jsquash/png', '@jsquash/oxipng'],
    },
  },
})

I followed the recommended formatting set in the docs, so I am pretty confident its doing something

But I am still getting this error in the vite console

ERROR  Failed to resolve import "../../.." from "node_modules/@jsquash/oxipng/codec/pkg-parallel/snippets/wasm-bindgen-rayon-3d2df09ebec17a22/src/workerHelpers.js?v=ff7385f7". Does the file exist?

And this error when starting my app

Cannot find module '/home/f53/proj/MinZip/node_modules/@jsquash/png/encode' imported from /home/f53/proj/MinZip/node_modules/@jsquash/png/index.js

[CodeF53]

Editing line 54 of workerHelpers.js

    // the main thread).
-  const pkg = await import('../../..');
+  const pkg = await import('../../../squoosh_oxipng');
   await pkg.default(data.module, data.memory);

Fixes Failed to resolve import "../../..", I suspect this is because you can't import a directory unless that directory contains an index.js to be automatically imported

[patratel]

Hey thank you for your answers guys, I did try what was written in the documentation to no avail.

I tried the following things:

1. Adding the following lines to the nuxt config file

./nuxt.config.ts

vite: { optimizeDeps: { exclude: ["@jsquash/avif"], }, },

2. Based on CodeF53's answer I tried importing the encode package directly as such

import encode from "@jsquash/avif/encode";
which resulted in a different import error which is the following:

Cannot find module 'C:\Users\cab_l\Desktop\Repositories\wsp-3.0\node_modules@jsquash\avif\meta' imported from C:\Users\cab_l\Desktop\Repositories\wsp-3.0\node_modules@jsquash\avif\encode.js

3. I also tried looking for a similar import error in the ./node_modules/@jsquash/avif/encode.js file and came across the following 2 imports which seem to import the files directly and not the directories as mentioned in the above comment.

const avifEncoder = await import('./codec/enc/avif_enc_mt'); const avifEncoder = await import('./codec/enc/avif_enc');

I'm still at a loss how to make this work on my app

[patratel]

Hello,

I've digged deeper into this issue and finally was able to resolve it, mainly thanks to @CodeF53.

The fix that did it for me was the following:

1. I imported the encode module directly

./composables/useUtils.ts
import encode from "@jsquash/avif/encode.js";

2. I changed the import lines and added a final .js at the end of the files.

./node_modules/@jsquash/avif/encode.js

import  {defaultOptions} from './meta.js';
import { initEmscriptenModule } from './utils.js';

Thank you for your time and tips guys!

[CodeF53]

Modifying the content of the source in node_modules isn't a proper solution for me. We still need a proper fix

[patratel]

I agree, i reopened the issue

[CodeF53]

I found a fix for the "Cannot find module" error in Nuxt:
nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  build: {
    transpile: [/@jsquash\/.*/],
  },
})

But:

• this doesn't fix the Could not resolve "../../.." from @jsquash/oxipng
• I haven't found an alternative for Vite

[jamsinclair]

Thanks for looking further into this @CodeF53 and @patratel.

It looks like Nuxt anticipates all third party modules to use the CommonJS module format. The modules provided by jSquash are all ESM. I'd prefer not to add CommonJS as it's a legacy format and not relevant to the browser intended context of these jSquash modules.

This means to use the jSquash modules with Nuxt you'll need to manually mark them as needing to be transpiled to CommonJS exports. (As discovered by @CodeF53).

I'd recommend setting the Nuxt config to

export default defineNuxtConfig({
  build: {
    transpile: ["@jsquash/avif", "@jsquash/png"],
  },
  vite: {
    optimizeDeps: {
      exclude: ["@jsquash/avif", "@jsquash/png"],
    },
  },
});

I have a minimal example of running jSquash modules with Nuxt at https://codesandbox.io/p/sandbox/hardcore-wildflower-zfh93n. You might find it useful @patratel.

[jamsinclair]

this doesn't fix the Could not resolve "../../.." from @jsquash/oxipng

@CodeF53 when you have time could you please provide a reproducible example of this with a shareable interface, such as CodeSandbox. That would be super helpful.

I've got my own example working ok with @jsquash/oxipng, Nuxt, Vite, Vue over at https://codesandbox.io/p/sandbox/jsquash-issue-19-oxipng-8kdc5h

[patratel]

I tried what you suggested @jamsinclair and it worked like a charm, thanks for the fix!

If I may dare I would like to ask you another question regarding an issue I encountered. I'm using the @jsquash/avif library in a Web Worker in order to run the conversion in the background. This works well now in development, the issue is that when I run "nuxt build" it stops due to an issue:

Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit: 22:36:03 (vite:worker) transform "C:/Users/cab_l/Desktop/Repositories/wsp-3.0/assets/workers/convertWorker.js?worker" (commonjs--resolver) resolveId "./codec/enc/avif_enc_mt" "C:/Users/cab_l/Desktop/Repositories/wsp-3.0/node_modules/@jsquash/avif/encode.js" (vite:worker-import-meta-url) transform "C:/Users/cab_l/Desktop/Repositories/wsp-3.0/node_modules/@jsquash/avif/codec/enc/avif_enc_mt.js"

This is how I'm importing the worker in my code

import convertWorker from "@/assets/workers/convertWorker?worker";

I've also tried importing the worker as such to no avail:

`
import convertWorker from "@/assets/workers/convertWorker?worker&url";

const convWorker = new Worker(convertWorker, { type: "module" });
`

My intuition tells me this might be due to Vite rather than the library itself. If you've run into anything similar before I would be grateful for any help/insight.

[jamsinclair]

@patratel yeah I think this is an issue with Vite itself. I think you've already found the related issue over at vitejs/vite#13367.

I will note that the avif package contains a worker, so you are indeed loading a worker inside worker which matches with the other user's problems in that issue. Given that the AVIF processing is already happening in a worker, do you need to use a worker then? (i.e. you don't need to use a worker in your own source code)