diff --git a/docs/guide/features.md b/docs/guide/features.md index 4aa3684faa3535..ca1d09fcab748f 100644 --- a/docs/guide/features.md +++ b/docs/guide/features.md @@ -679,6 +679,16 @@ If the WebAssembly module declares imports of its own, Vite resolves them from J This follows the [WebAssembly/ES Module Integration proposal](https://github.com/WebAssembly/esm-integration). Because a WebAssembly module is instantiated asynchronously, a directly imported `.wasm` file behaves as an async module and requires top-level `await` support. +::: tip TypeScript support + +Since the types of `.wasm` files are unknown, TypeScript will report errors like `Module '"*.wasm"' has no exported member 'add'`. To fix this, enable [`allowArbitraryExtensions`](https://www.typescriptlang.org/tsconfig/#allowArbitraryExtensions) in your `tsconfig.json` and create a declaration file next to your `.wasm` file. With `allowArbitraryExtensions` enabled, TypeScript will look for a declaration file named `{filename}.d.wasm.ts` when resolving a `.wasm` import. For example, for `add.wasm`, create `add.d.wasm.ts`: + +```ts [add.d.wasm.ts] +export function add(a: number, b: number): number +``` + +::: + ### Manual Initialization When you need control over when and how the module is instantiated, import it with `?init`. The default export will be an initialization function that returns a Promise of the [`WebAssembly.Instance`](https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Instance): diff --git a/packages/create-vite/template-lit-ts/tsconfig.json b/packages/create-vite/template-lit-ts/tsconfig.json index ec4849a0c8105e..0b310b4db7b247 100644 --- a/packages/create-vite/template-lit-ts/tsconfig.json +++ b/packages/create-vite/template-lit-ts/tsconfig.json @@ -6,6 +6,7 @@ "module": "esnext", "lib": ["ES2023", "DOM"], "types": ["vite/client"], + "allowArbitraryExtensions": true, "skipLibCheck": true, /* Bundler mode */ diff --git a/packages/create-vite/template-preact-ts/tsconfig.app.json b/packages/create-vite/template-preact-ts/tsconfig.app.json index 3b144be1361f92..63faf83c0ad56b 100644 --- a/packages/create-vite/template-preact-ts/tsconfig.app.json +++ b/packages/create-vite/template-preact-ts/tsconfig.app.json @@ -6,6 +6,7 @@ "lib": ["ES2023", "DOM"], "types": ["vite/client"], "skipLibCheck": true, + "allowArbitraryExtensions": true, "paths": { "react": ["./node_modules/preact/compat/"], "react-dom": ["./node_modules/preact/compat/"] diff --git a/packages/create-vite/template-qwik-ts/tsconfig.app.json b/packages/create-vite/template-qwik-ts/tsconfig.app.json index 8e60c4de9b5381..a6b48400dce981 100644 --- a/packages/create-vite/template-qwik-ts/tsconfig.app.json +++ b/packages/create-vite/template-qwik-ts/tsconfig.app.json @@ -5,6 +5,7 @@ "module": "esnext", "lib": ["ES2023", "DOM"], "types": ["vite/client"], + "allowArbitraryExtensions": true, "skipLibCheck": true, /* Bundler mode */ diff --git a/packages/create-vite/template-react-ts/tsconfig.app.json b/packages/create-vite/template-react-ts/tsconfig.app.json index 7f42e5f7cd2e79..6830b6f759f55a 100644 --- a/packages/create-vite/template-react-ts/tsconfig.app.json +++ b/packages/create-vite/template-react-ts/tsconfig.app.json @@ -5,6 +5,7 @@ "lib": ["ES2023", "DOM"], "module": "esnext", "types": ["vite/client"], + "allowArbitraryExtensions": true, "skipLibCheck": true, /* Bundler mode */ diff --git a/packages/create-vite/template-solid-ts/tsconfig.app.json b/packages/create-vite/template-solid-ts/tsconfig.app.json index e8a00e4fc12e71..5caea17215bd5e 100644 --- a/packages/create-vite/template-solid-ts/tsconfig.app.json +++ b/packages/create-vite/template-solid-ts/tsconfig.app.json @@ -5,6 +5,7 @@ "module": "esnext", "lib": ["ES2023", "DOM"], "types": ["vite/client"], + "allowArbitraryExtensions": true, "skipLibCheck": true, /* Bundler mode */ diff --git a/packages/create-vite/template-svelte-ts/tsconfig.app.json b/packages/create-vite/template-svelte-ts/tsconfig.app.json index d774b20121e441..5992dcc690ea2e 100644 --- a/packages/create-vite/template-svelte-ts/tsconfig.app.json +++ b/packages/create-vite/template-svelte-ts/tsconfig.app.json @@ -5,6 +5,7 @@ "target": "es2023", "module": "esnext", "types": ["svelte", "vite/client"], + "allowArbitraryExtensions": true, "noEmit": true, /** * Typecheck JS in `.svelte` and `.js` files by default. diff --git a/packages/create-vite/template-vanilla-ts/tsconfig.json b/packages/create-vite/template-vanilla-ts/tsconfig.json index 1ab38c85c5c279..5bc8140df12fdb 100644 --- a/packages/create-vite/template-vanilla-ts/tsconfig.json +++ b/packages/create-vite/template-vanilla-ts/tsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "allowArbitraryExtensions": true, "target": "es2023", "module": "esnext", "lib": ["ES2023", "DOM"], diff --git a/packages/create-vite/template-vue-ts/tsconfig.app.json b/packages/create-vite/template-vue-ts/tsconfig.app.json index 5c750c5d835622..d72aa750dfe040 100644 --- a/packages/create-vite/template-vue-ts/tsconfig.app.json +++ b/packages/create-vite/template-vue-ts/tsconfig.app.json @@ -3,6 +3,7 @@ "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "types": ["vite/client"], + "allowArbitraryExtensions": true, /* Linting */ "noUnusedLocals": true,