Upgrade Vite example to Vite 3

[jadh4v]

Reported by @FezVrasta

Slack Conversation / Context

Fede We are trying to migrate our app to Vite but I’m having issues with the itk-wasm configuration, it looks like Vite doesn’t allow to mutate anything in node_modules so we cannot set the aliases for the itkConfig.js imports. Was there any progress on a better system to configure it?

Fede Meanwhile I’m directly patching the itk-wasm package using Yarn.

Raj I don't fully understand Vite, but I checked with Matt and he was asking if you have checked the provided example for details: https://wasm.itk.org/examples/vite.html

Fede yeah, aliases don’t seem to work

Matt McCormick Hi , is this with Vite 2 or Vite 3?

Fede Vite 3

Matt McCormick Checking the example, it has Vite 2, so I will look into an update.

[FezVrasta]

Related:

https://github.com/InsightSoftwareConsortium/itk-wasm/issues/476

[xinaesthete]

Apologies for verbosity / if this isn't the right place to post...

I just started using this library with Vite (3) yesterday, and all seemed to be working fine (without following the example - fresh project, no vite.config.js at all, just import {readImageBlob} from 'itk-wasm' in TypeScript and jobs a good 'un).

However, I notice that when running the dev server with devtools open, although the code runs fine, it comes up with errors like

[plugin:vite:import-analysis] Failed to resolve import "../core/internal/createWebWorkerPromise.js" from "node_modules/itk-wasm/src/io/readImageArrayBuffer.ts?v=752ebe9a". Does the file exist?
/Users/petertodd/code/www/obvios-proto/node_modules/itk-wasm/src/io/readImageArrayBuffer.ts:1:35
1  |  import createWebWorkerPromise from "../core/internal/createWebWorkerPromise.js";
   |                                      ^

Looking through the code itself, it seems the imports are written with ".js" explicitly included at the end of file-names - the message seems to be correct, very few itk-wasm/src/**/*.js files exist (there are corresponding .ts and dist/**/*.js).

Digging in to this, and testing it out with your vite example, I found that the same issue is also present there.

I tried changing the vite config to use a regex to strip out ".js", but this doesn't seem to be working - I'm not sure if this is what was referred to above by Fede "yeah, aliases don't work"...

For testing, I manually swapped out each entry that vite complained about in the vite example from here, and that does work - but it's not pretty.

  resolve: {
    // where itk-wasm code has 'import ../itkConfig.js` point to the path of itkConfig
    alias: [
      {find: '../itkConfig.js', replacement: itkConfig},
      {find: '../../itkConfig.js', replacement: itkConfig},

      {find: './readImageArrayBuffer.js', replacement: './readImageArrayBuffer'},
      {find: './readImageFile.js', replacement: './readImageFile'},
      {find: './readMeshFile.js', replacement: './readMeshFile'},
      {find: './getFileExtension.js', replacement: './getFileExtension'},
      {find: './extensionToMeshIO.js', replacement: './extensionToMeshIO'},
      
      // {find: /^(.*)$/, replacement: '$1'}, // replace with same string: nothing is resolved?
      // {find: /^(.*)\.js$/, replacement: '$1'}, // replace without '.js' - error "optimized info should be provided"
    ]
  }

[thewtex]

Hi @xinaesthete great hear that itk-wasm is working out of the box for you with Vite 3.

Regarding the .js extension, this is to support ES6 looking to native browser support, which is supported by Typescript.

I have not seen that warning -- I am wondering if it is caused in some way by Vite's default configuration or a limitation in in plugin:vite:import-analysis. Did you find anything regarding this in vite's issue trackers?

@FezVrasta 's build is now working, and the Vite example, which is tested in CI, has been bumped to Vite 3.

[xinaesthete]

Thanks for the response @thewtex - you learn something every day re. TS ES6 stuff.

Certainly does seem to be more of an issue on the Vite side - there've been some related issues closed in the past and I didn't manage to get any response on their discord servers, but I might try to dig a bit further (not sure why my attempted workaround with alias regex didn't work either, but I appreciate that's getting still further out of scope for here).

[thewtex]

Closing as the original issue is resolved. Please create a new issue for additional discussions or problems (I often do not see conversations on closed issues :see_no_evil: ).

Documentation / example was recently updated for Vite 4, #715 .

We have added support for runtime-configuration of WebAssembly assets for custom pipelines. We are working towards runtime configuration of WebAssembly IO modules. This will avoid future headaches :exploding_head: