使用 vite 和 vue 运行 argon2-browser

Question

我花了几个小时尝试使用 Vite 在 Vue 应用程序中运行

argon2-browser

lib。

我想我已经按照文档告诉我的方式做了所有事情，但我不断收到错误：

This require call is not allowed because the imported file "vite-plugin-wasm-namespace:\\node_modules\\argon2-browser\\dist\\argon2.wasm" contains a top-level await

我的

vite.config.ts

：

export default defineConfig({
  plugins: [
    wasm(),
    topLevelAwait(), 
    vue(),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "/^~/": '',
    },
  },
  optimizeDeps: {},
});

我试过更改插件的顺序，但没有帮助。

我正在以这种方式导入 lib

import argon2 from 'argon2-browser'

.

Argon2 库链接

如果我删除

topLevelAwait()

插件 - 错误不会改变。如果我删除

wasm()

插件，我会收到不支持 wasm 的错误消息：

"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.

如果有人对我如何解决这个问题有任何想法，请告诉我！如果需要，我也愿意提供额外的背景和/或细节。

Answer 1

如果我没看错，看看能不能帮到你解决

import argon2Wasm from 'argon2-browser/dist/argon2.wasm';
 
async function instantiateArgon2() {
  const argon2 = await WebAssembly.instantiateStreaming(fetch(argon2Wasm), {
    env: {
      memoryBase: 0,
      tableBase: 0,
      memory: new WebAssembly.Memory({ initial: 256 }),
      table: new WebAssembly.Table({ initial: 0, element: 'anyfunc' }),
      __memory_base: 0,
      __table_base: 0,
    },
  });

  return argon2.instance.exports;
}

const argon2 = await instantiateArgon2();
console.log(argon2); // exemplo de uso