Mr Martian Posts - Answer Overflow

Mr Martian

•Created by Mr Martian on 2/27/2024 in #pages-help

NuxtJS (Vue3) with pages pulls in a library with wasm causing errors

If I access the page from another page, it loads perfectly fine. If I try to load the page directly:

500
WebAssembly.instantiate(): Wasm code generation disallowed by embedder

500
WebAssembly.instantiate(): Wasm code generation disallowed by embedder

I've read from the search that basically if you load wasm as a byte buffer it causes errors. Heres the thing though: I load the library using an onmount script:

<template>
  <div :id='dynamicId' ref='container'>
    <slot />
  </div>
</template>

<script lang="ts">
export default {
  props: { ... },
  setup ({ ... }) {
    const dynamicId = mapID ?? 'map'
    const container = ref<HTMLElement>()
    const scriptLoaded = ref(false)

    const loadScript = (): void => {
      const config = useRuntimeConfig()
      const script = document.createElement('script')
      script.src = `/library.js`
      script.onload = () => {
        scriptLoaded.value = true
        onScriptLoad()
      }
      document.head.appendChild(script)
    }

// other code here

    onMounted(() => {
      if (!scriptLoaded.value) loadScript()
      else onScriptLoad()
    })

    onUnmounted(() => {
      if (mapInstance.value !== null) mapInstance.value.delete()
    })

    return { dynamicId, container, mapInstance }
  }
}
</script>

<style>
</style>

<template>
  <div :id='dynamicId' ref='container'>
    <slot />
  </div>
</template>

<script lang="ts">
export default {
  props: { ... },
  setup ({ ... }) {
    const dynamicId = mapID ?? 'map'
    const container = ref<HTMLElement>()
    const scriptLoaded = ref(false)

    const loadScript = (): void => {
      const config = useRuntimeConfig()
      const script = document.createElement('script')
      script.src = `/library.js`
      script.onload = () => {
        scriptLoaded.value = true
        onScriptLoad()
      }
      document.head.appendChild(script)
    }

// other code here

    onMounted(() => {
      if (!scriptLoaded.value) loadScript()
      else onScriptLoad()
    })

    onUnmounted(() => {
      if (mapInstance.value !== null) mapInstance.value.delete()
    })

    return { dynamicId, container, mapInstance }
  }
}
</script>

<style>
</style>

The point is I'd like to avoid caching onMounted content if possible. I tried using nitro options to not to cache the page but that did not work.

1 replies

Gaming

Programming