crux icon indicating copy to clipboard operation
crux copied to clipboard

Add an example using vite as a JS/TS build tool

Open nmrshll opened this issue 1 year ago • 2 comments

For a few reasons it was a bit harder than expected adapting the examples to work with Vite (+solid-js): I hit a few problems which weren't obvious to troubleshoot.

I'm planning on adding a web target to the counter example, using Vite and SolidJs.

nmrshll avatar Jan 07 '24 18:01 nmrshll

Thanks for this!

For posterity, would you mind elaborating on the issues you hit, in case some other frameworks face similar problems?

charypar avatar Jan 12 '24 09:01 charypar

Ah sorry I had missed your message, and I've since then forgotten the details of the problems I ran into.

From vague memory, I had two problems, with the javascript tooling stack rather than the code itself:

  1. in the package.json dependencies, using link:... for the shared libraries didn't work for some reason (the wasm would fail loading at runtime in the browser). Using file:... instead worked:
    "shared": "file:../shared/pkg",
    "shared_types": "file:../shared_types/generated/typescript",
  1. In the vite.config.ts file (default file provided with the official solidjs/vite template), I needed to explicitly tell vite to not optimize the shared wasm dependency:
export default defineConfig({
  plugins: [solid()],
  optimizeDeps: {
    exclude: ["shared"],
  },
});

Otherwise, if I remember right, the wasm would have missing symbols when called at runtime.

nmrshll avatar Feb 16 '24 18:02 nmrshll