Vue 3

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores que quiero documentar para ayudar a otros usuarios que experimenten las mismas fallas.

Cabe mencionar que mi entorno de trabajo es Comlink con WebAssembly, Vue 3, Vite y Pinia. Varias de esas tecnologías no afectan al uso de Comlink pero me parece importante mencionarlas.

Estos errores, en un contexto de JavaScript puro son fáciles de solucionar. El Maximum call stack size exceeded normalmente es causado porque una función recursiva se ha salido de control, y el cannot read property of undefined es porque una variable es undefined y tratamos de leer una propiedad.

Sin embargo, con Comlink los errores son distintos.

Errores con Comlink en JavaScript: Maximum call stack size exceeded

Maximum call stack size exceeded: era porque estaba exportando el resultado de Comlink.wrap en una store. Tengo mi store de Pinia así:

import DbWorker from "@/worker?worker"

import * as Comlink from "comlink"
const worker = new DbWorker();
const DbHelper = Comlink.wrap(worker);
DbHelper.iniciar();

Fíjate que DbHelper es lo que Comlink.wrap devolvió. Y el error Maximum call stack size exceeded con Comlink era causado porque yo estaba exponiendo la variable DbHelper así:

export const useWasmStore = defineStore('wasm', () => {
    return {DbHelper}
})

Así que la solución es no exponer esa variable. Si quieres usarla puedes exponer un método desde la store y luego desde ese método local usar la variable.

Por ejemplo mira mi store en donde, después de limpiar mi código, la variable que se llamaba DbHelper es envolturaWorkerPuenteWasm y la estoy exponiendo con la función ejecutarAccionEnWasm, de este modo cualquiera puede invocar a ejecutarAccionEnWasm pero ya no estoy exponiendo el resultado de Comlink.wrap:

import { defineStore } from 'pinia'
import * as Comlink from "comlink"
import ArchivoWorkerPuenteWasm from "@/worker_puente_wasm?worker"
const workerPuenteWasm = new ArchivoWorkerPuenteWasm();
const envolturaWorkerPuenteWasm = Comlink.wrap(workerPuenteWasm);
// @ts-ignore
await envolturaWorkerPuenteWasm.iniciar();

export const useWasmStore = defineStore('wasm', () => {
    async function ejecutarAccionEnWasm(accion: string, datos: Array<any>) {
        // @ts-ignore
        const resultado = await envolturaWorkerPuenteWasm.ejecutarAccionEnWasm(accion, datos);
        return resultado.resultado;
    }

    return { ejecutarAccionEnWasm }
})

Cannot read properties of undefined

El error contenía el siguiente mensaje:

comlink.js?v=8e4c773e:40 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘apply’) at callback

Era porque estaba invocando a una función que no existe.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Imprimir ñ en impresora térmica

En este post te enseñaré a imprimir la letra ñ en una impresora térmica. Voy…

21 horas hace

Tramitar acta de nacimiento en línea de manera instantánea

En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…

2 días hace

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 semanas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 semanas hace

Esta web usa cookies.