typescript - Failed to import WASM using ?url in Vite Project - Stack Overflow

admin管理员组

文章数量:1022795

Background: I am new to Vite and recently I am trying to build a Markdown render project which receives Markdown format string from outside and renders GFM HTML. I choosed md4w as the converter and the npm package contains two wasm in md4w/js path.

Here is the code I used originally.

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  await init(wasmUrl);
  html.value = mdToHtml(props.msg);
});
</script>

and it worked fine using pnpm dev. However, If i use pnpm build and pnpm preview, it won't work because Vite didn't bundle the wasm into the dist and the browser console would show this error.

TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

Then I followed the md4w project README guide and change the setup script part to

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import wasmUrl from 'md4w/js/wasm-small.wasm?url';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  await init(wasmUrl);
  html.value = mdToHtml(props.msg);
});
</script>

However, this time is even worse. Even pnpm dev would failed and the linter would also show this error

[plugin:vite:import-analysis] Missing "./js/wasm-small.wasm" specifier in "md4w" package

But the wasm-small.wasm is there in node_modules and the md4w.d.ts is also there. The directory structure is

-rw-r--r--  2  staff  staff    1.7K    11    19  16:02  index.js          
-rwxr-xr-x  2  staff  staff  863.9K    11    19  16:02  md4w-fast.wasm*   
-rwxr-xr-x  2  staff  staff   59.1K    11    19  16:02  md4w-small.wasm*  
-rw-r--r--  2  staff  staff    5.6K    11    19  16:02  md4w.d.ts         
-rw-r--r--  2  staff  staff    7.4K    11    19  16:02  md4w.js           
-rw-r--r--  2  staff  staff     155    11    19  16:02  unwasm.js

The code to reproduce is available in this stackblitz

Is there other ways that could import the wasm from this md4w package without import from the external url and could be bundled into the dist? Thanks a lot!

Background: I am new to Vite and recently I am trying to build a Markdown render project which receives Markdown format string from outside and renders GFM HTML. I choosed md4w as the converter and the npm package contains two wasm in md4w/js path.

Here is the code I used originally.

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  await init(wasmUrl);
  html.value = mdToHtml(props.msg);
});
</script>

and it worked fine using pnpm dev. However, If i use pnpm build and pnpm preview, it won't work because Vite didn't bundle the wasm into the dist and the browser console would show this error.

TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

Then I followed the md4w project README guide and change the setup script part to

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import wasmUrl from 'md4w/js/wasm-small.wasm?url';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  await init(wasmUrl);
  html.value = mdToHtml(props.msg);
});
</script>

However, this time is even worse. Even pnpm dev would failed and the linter would also show this error

[plugin:vite:import-analysis] Missing "./js/wasm-small.wasm" specifier in "md4w" package

But the wasm-small.wasm is there in node_modules and the md4w.d.ts is also there. The directory structure is

-rw-r--r--  2  staff  staff    1.7K    11    19  16:02  index.js          
-rwxr-xr-x  2  staff  staff  863.9K    11    19  16:02  md4w-fast.wasm*   
-rwxr-xr-x  2  staff  staff   59.1K    11    19  16:02  md4w-small.wasm*  
-rw-r--r--  2  staff  staff    5.6K    11    19  16:02  md4w.d.ts         
-rw-r--r--  2  staff  staff    7.4K    11    19  16:02  md4w.js           
-rw-r--r--  2  staff  staff     155    11    19  16:02  unwasm.js

The code to reproduce is available in this stackblitz

Is there other ways that could import the wasm from this md4w package without import from the external url and could be bundled into the dist? Thanks a lot!

• typescript
• vue.js
• vite
• webassembly
• pnpm

Share Improve this question Follow edited Nov 19, 2024 at 20:05 Eli 6188 bronze badges asked Nov 19, 2024 at 10:37 Isaiah ChanIsaiah Chan 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

md4w uses the exports field, which prevents accessing internal files, so the docs are wrong, you can't import under "md4w/js/*".

It does have unwasm support, so I tried installing that, but it didn't seem to help.

Here's some "hacky" workarounds instead:

• Copy the wasm file into your project (works for me): example stackblitz.
• Use a CDN version (haven't tried, should also work, but would have worse perf).

Background: I am new to Vite and recently I am trying to build a Markdown render project which receives Markdown format string from outside and renders GFM HTML. I choosed md4w as the converter and the npm package contains two wasm in md4w/js path.

Here is the code I used originally.

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  await init(wasmUrl);
  html.value = mdToHtml(props.msg);
});
</script>

and it worked fine using pnpm dev. However, If i use pnpm build and pnpm preview, it won't work because Vite didn't bundle the wasm into the dist and the browser console would show this error.

TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

Then I followed the md4w project README guide and change the setup script part to

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import wasmUrl from 'md4w/js/wasm-small.wasm?url';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  await init(wasmUrl);
  html.value = mdToHtml(props.msg);
});
</script>

However, this time is even worse. Even pnpm dev would failed and the linter would also show this error

[plugin:vite:import-analysis] Missing "./js/wasm-small.wasm" specifier in "md4w" package

But the wasm-small.wasm is there in node_modules and the md4w.d.ts is also there. The directory structure is

-rw-r--r--  2  staff  staff    1.7K    11    19  16:02  index.js          
-rwxr-xr-x  2  staff  staff  863.9K    11    19  16:02  md4w-fast.wasm*   
-rwxr-xr-x  2  staff  staff   59.1K    11    19  16:02  md4w-small.wasm*  
-rw-r--r--  2  staff  staff    5.6K    11    19  16:02  md4w.d.ts         
-rw-r--r--  2  staff  staff    7.4K    11    19  16:02  md4w.js           
-rw-r--r--  2  staff  staff     155    11    19  16:02  unwasm.js

The code to reproduce is available in this stackblitz

Is there other ways that could import the wasm from this md4w package without import from the external url and could be bundled into the dist? Thanks a lot!

Background: I am new to Vite and recently I am trying to build a Markdown render project which receives Markdown format string from outside and renders GFM HTML. I choosed md4w as the converter and the npm package contains two wasm in md4w/js path.

Here is the code I used originally.

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  await init(wasmUrl);
  html.value = mdToHtml(props.msg);
});
</script>

and it worked fine using pnpm dev. However, If i use pnpm build and pnpm preview, it won't work because Vite didn't bundle the wasm into the dist and the browser console would show this error.

TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

Then I followed the md4w project README guide and change the setup script part to

<script setup lang="ts">
import { init, mdToHtml } from 'md4w';
import wasmUrl from 'md4w/js/wasm-small.wasm?url';
import { onMounted, ref } from 'vue';
import 'github-markdown-css/github-markdown.css';

const props = defineProps<{ msg: string }>();
const html = ref('');

onMounted(async () => {
  await init(wasmUrl);
  html.value = mdToHtml(props.msg);
});
</script>

However, this time is even worse. Even pnpm dev would failed and the linter would also show this error

[plugin:vite:import-analysis] Missing "./js/wasm-small.wasm" specifier in "md4w" package

But the wasm-small.wasm is there in node_modules and the md4w.d.ts is also there. The directory structure is

-rw-r--r--  2  staff  staff    1.7K    11    19  16:02  index.js          
-rwxr-xr-x  2  staff  staff  863.9K    11    19  16:02  md4w-fast.wasm*   
-rwxr-xr-x  2  staff  staff   59.1K    11    19  16:02  md4w-small.wasm*  
-rw-r--r--  2  staff  staff    5.6K    11    19  16:02  md4w.d.ts         
-rw-r--r--  2  staff  staff    7.4K    11    19  16:02  md4w.js           
-rw-r--r--  2  staff  staff     155    11    19  16:02  unwasm.js

The code to reproduce is available in this stackblitz

Is there other ways that could import the wasm from this md4w package without import from the external url and could be bundled into the dist? Thanks a lot!

• typescript
• vue.js
• vite
• webassembly
• pnpm

Share Improve this question Follow edited Nov 19, 2024 at 20:05 Eli 6188 bronze badges asked Nov 19, 2024 at 10:37 Isaiah ChanIsaiah Chan 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

md4w uses the exports field, which prevents accessing internal files, so the docs are wrong, you can't import under "md4w/js/*".

It does have unwasm support, so I tried installing that, but it didn't seem to help.

Here's some "hacky" workarounds instead:

• Copy the wasm file into your project (works for me): example stackblitz.
• Use a CDN version (haven't tried, should also work, but would have worse perf).

本文标签： typescriptFailed to import WASM using url in Vite ProjectStack Overflow