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

`npm run build` fails to detect the plugin #55

Closed FredrikNoren closed 7 months ago

FredrikNoren commented 7 months ago

Hi,

I'm using npm run dev successfully, but for some reason it seems like the plugin is not detected when I run npm run build.

Here's my config file:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
import checker from "vite-plugin-checker";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [wasm(), topLevelAwait(), svgr(), react(), checker({ typescript: true })],
});

The error in the console I'm getting is:

npm run build

> web_next@0.0.0 build
> tsc && vite build

vite v5.0.12 building for production...
✓ 353 modules transformed.
[vite:worker] Could not load /Users/fredrik/github/robo_carmack/web_next/src/modules/client-wasm/client_wasm_bg.wasm (imported by src/modules/client-wasm/client_wasm.js): "ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use `.wasm?init` or `.wasm?url`. See https://vitejs.dev/guide/features.html#webassembly for more details.
file: /Users/fredrik/github/robo_carmack/web_next/src/worker.ts?worker&url
error during build:
Error: Could not load /Users/fredrik/github/robo_carmack/web_next/src/modules/client-wasm/client_wasm_bg.wasm (imported by src/modules/client-wasm/client_wasm.js): "ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use `.wasm?init` or `.wasm?url`. See https://vitejs.dev/guide/features.html#webassembly for more details.
    at Object.load (file:///Users/fredrik/github/robo_carmack/web_next/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62695:19)
    at file:///Users/fredrik/github/robo_carmack/web_next/node_modules/rollup/dist/es/shared/node-entry.js:18692:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///Users/fredrik/github/robo_carmack/web_next/node_modules/rollup/dist/es/shared/node-entry.js:18592:28)
    at async file:///Users/fredrik/github/robo_carmack/web_next/node_modules/rollup/dist/es/shared/node-entry.js:17762:33
    at async Queue.work (file:///Users/fredrik/github/robo_carmack/web_next/node_modules/rollup/dist/es/shared/node-entry.js:18802:32)

My devDeps:

    "vite": "^5.0.8",
    "vite-plugin-checker": "^0.6.4",
    "vite-plugin-svgr": "^4.2.0",
    "vite-plugin-top-level-await": "^1.4.1",
    "vite-plugin-wasm": "^3.3.0"

Any idea what might be going on? This is in a brand new vite project. I'm using wasm-pack to build the wasm file.

FredrikNoren commented 7 months ago

The plugin is also listed when I run vite build --debug:

  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite-plugin-wasm',
  vite:config     'vite-plugin-svgr',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite-plugin-checker',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite-plugin-top-level-await',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
FredrikNoren commented 7 months ago

This was because we were running the wasm inside of a worker; following the steps in the readme solved it (https://github.com/Menci/vite-plugin-wasm?tab=readme-ov-file#web-worker)