Menci / vite-plugin-wasm

Add WebAssembly ESM integration (aka. Webpack's `asyncWebAssembly`) to Vite and support `wasm-pack` generated modules.
MIT License
281 stars 16 forks source link

esbuild plugin resolves paths incorrectly on Windows #26

Closed qtow closed 1 year ago

qtow commented 1 year ago

The esbuild plugin does

import { posix as path } from "path";

and uses that to resolve paths. This does not work on Windows. The error I get is

X [ERROR] [plugin vite-plugin-wasm] ENOENT: no such file or directory, open '(project root directory)\client_bg.wasm'

    out/bindgen/client.js:1:22:
      1 │ import * as wasm from "./client_bg.wasm";
        ╵                       ~~~~~~~~~~~~~~~~~~

I would expect the plugin to try to load '(project root directory)\out\bindgen\client_bg.wasm', but path.dirname(args.importer) returns ".".

As a workaround, I've disabled optimizeDeps in vite.config.ts:

import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import wasm from "vite-plugin-wasm";

export default defineConfig({
    plugins: [
        solid(),
        wasm(),
    ],
    build: {
        target: "esnext",
        outDir: "./out/web",
    },
    optimizeDeps: {
        disabled: true,
    }
});

This works, but isn't ideal.

Menci commented 1 year ago

What's your args.importer value?

anak1st commented 1 year ago

I have the same issues, I use Windows too. The project runs well when build, but in dev, there is a problem with the path.

Menci commented 1 year ago

@anak1st What's your args.importer value?

TrueDoctor commented 1 year ago

@Menci we encountered the same issue:

[0]
[0]   VITE v4.1.1  ready in 962 ms
[0]
[0]   ➜  Local:   http://localhost:8080/
[0]   ➜  Network: use --host to expose
[0] {
[0]   path: './graphite_wasm_bg.wasm',
[0]   importer: 'F:\\Graphite\\Graphite\\frontend\\wasm\\pkg\\graphite_wasm.js',
[0]   namespace: 'file',
[0]   resolveDir: 'F:\\Graphite\\Graphite\\frontend\\wasm\\pkg',
[0]   kind: 'import-statement',
[0]   pluginData: undefined
[0] }
[0] args.path ./graphite_wasm_bg.wasm
[0] args.path F:\Graphite\Graphite\frontend\wasm\pkg\graphite_wasm_bg.wasm
[0] {
[0]   path: './graphite_wasm_bg.wasm',
[0]   importer: 'F:\\Graphite\\Graphite\\frontend\\wasm\\pkg\\graphite_wasm_bg.js',
[0]   namespace: 'file',
[0]   resolveDir: 'F:\\Graphite\\Graphite\\frontend\\wasm\\pkg',
[0]   kind: 'import-statement',
[0]   pluginData: undefined
[0] }
[0] args.path ./graphite_wasm_bg.wasm

Changing the plugin code to not use the posix methods for path resolution works fine for compilation but produces errors down the line: image

I don't have a windows machine for local debugging these logs were generated on a friends computer (pinging @Keavon to keep him up do date)

Menci commented 1 year ago

@TrueDoctor Thanks! I'll get it fixed soon.

Menci commented 1 year ago

Try v3.2.2

Keavon commented 1 year ago

Thanks for the quick change @Menci. But it looks like that failed CI so it didn't publish to npm. I tried using that commit hash as the source rather than npm with "vite-plugin-wasm": "git+https://github.com/Menci/vite-plugin-wasm.git#1917635622ff812c02f14043a681f9ca57c21f8a", but I'm now getting:

[0] failed to load config from C:\Users\Keavon\Projects\Graphite\frontend\vite.config.ts
[0] error when starting dev server:
[0] Error: Cannot find module '../dist/index'
[0] Require stack:
[0] - C:\Users\Keavon\Projects\Graphite\frontend\node_modules\vite-plugin-wasm\exports\require.cjs
[0] - C:\Users\Keavon\Projects\Graphite\frontend\vite.config.ts
[0] - C:\Users\Keavon\Projects\Graphite\frontend\node_modules\vite\dist\node\chunks\dep-ca21228b.js
[0]     at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
[0]     at Module._load (node:internal/modules/cjs/loader:841:27)
[0]     at Module.require (node:internal/modules/cjs/loader:1061:19)
[0]     at require (node:internal/modules/cjs/helpers:103:18)
[0]     at Object.<anonymous> (C:\Users\Keavon\Projects\Graphite\frontend\node_modules\vite-plugin-wasm\exports\require.cjs:1:18)
[0]     at Module._compile (node:internal/modules/cjs/loader:1159:14)
[0]     at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
[0]     at _require.extensions.<computed> [as .js] (file:///C:/Users/Keavon/Projects/Graphite/frontend/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62359:17)
[0]     at Module.load (node:internal/modules/cjs/loader:1037:32)
[0]     at Module._load (node:internal/modules/cjs/loader:878:12)
[0] vite exited with code 1

I'm not sure if that's an issue with our end (I'm working with @TrueDoctor) or if it's caused by the same thing that made 3.2.2 fail CI.

Menci commented 1 year ago

Fixed CI. Now you could try 3.2.2