After spending several hours attempting to implement the argon2-browser library in a Vue app with Vite, I have been encountering a persistent error.
Despite following the documentation closely, I keep receiving the following message:
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
Here is an excerpt from my vite.config.ts:
export default defineConfig({
plugins: [
wasm(),
topLevelAwait(),
vue(),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
"/^~/": '',
},
},
optimizeDeps: {},
});
I have experimented with changing the plugin order, without success.
The way I am importing the library is through
import argon2 from 'argon2-browser'If I eliminate the topLevelAwait() plugin, the error remains unchanged. Removing the wasm() plugin results in an unsupported wasm error:
"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.
If anyone has any suggestions on how to resolve this issue, please share your insights! I am open to providing additional context and information if necessary.
Link to Argon2 lib