Tengo un espacio de trabajo en reacción donde intento configurar trabajadores de servicio.

en main.tsx hago:

 import * as serviceWorkerRegistration from './serviceWorkerRegistration'; serviceWorkerRegistration.register({ onSuccess: () => pwaStore.setState((state) => ({ ...state, isReady: true })), onUpdate: () => pwaStore.setState((state) => ({ ...state, hasUpdate: true })), });

serviceWorker.js es el mismo que el predeterminado de pwa-template, solo cambié esta línea para que funcione con NX.

 const swUrl = `${process.env.NX_PUBLIC_URL}/service-worker.js`; registerValidSW(swUrl, config);

service-worker.js es el predeterminado y contiene algunas importaciones

 import { clientsClaim } from 'workbox-core'; import { ExpirationPlugin } from 'workbox-expiration'; import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching'; import { registerRoute } from 'workbox-routing'; import { StaleWhileRevalidate } from 'workbox-strategies';

Ahora, cuando implemento y ejecuto este proyecto, se me solicita

Error durante el registro del trabajador del servicio: DOMException: no se pudo registrar un ServiceWorker para el alcance ('xxx') con el script ('xxx/service-worker.js'): el script tiene un tipo MIME no compatible ('text/html').

Entonces, supongo que el trabajador del servicio no se encuentra cuando se carga desde la URL directa. Así que lo agregué en la compilación.

 "assets": [ "apps/core/src/service-worker.js", "apps/core/src/manifest.json", "apps/core/src/robots.txt", "apps/core/src/favicon.ico", "apps/core/src/assets" ],

y ahora, lo encuentra, pero me preguntan con

Error de sintaxis no capturado: no se puede usar la declaración de importación fuera de un módulo (en service-worker.js: 1: 1)

No estoy seguro de cómo solucionar esto ahora.