title: React.js builds with Vite does not include service-worker.ts
body: <p>I am using Vite to build an SPA with React (typescript), and I am trying to register a service-worker. I am registering the script as type <code>module</code>, and <code>service-worker.ts</code> sits at <code>src/web-worker/service-worker.ts</code>. There is also a <strong>tsconfig.json</strong> at <code>src/web-worker</code></p>
  <p>Everything works in Dev, but when it's built, <code>src/web-worker/service-worker.ts is not replaced with anything equivalent</code>.</p>
  <p>Any suggestions?</p>
  <p><strong>index.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;link rel=&quot;icon&quot; type=&quot;image/svg+xml&quot; href=&quot;/src/favicon.svg&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/src/styles/globals.css&quot;&gt;
    &lt;title&gt;Vite App&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;module&quot; src=&quot;/src/main.tsx&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      if ('serviceWorker' in navigator) {
        (async () =&gt; {
          await navigator.serviceWorker.register(&quot;src/web-worker/service-worker.ts&quot;, { type: 'module' })
          console.log(&quot;Service worker registered&quot;)
        })()
      }
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p><strong>src/web-worker/service-worker.ts</strong></p>
  <pre><code>// Constants
  const CACHE_NAME = 'mycache-v1.0.0'
  const urlsToCache = ['/']
  
  declare const self: ServiceWorkerGlobalScope;
  
  self.addEventListener('install', async (event: ExtendableEvent) =&gt; {
      try {
          // Create (open) cache
          const cache = await caches.open(CACHE_NAME)
          await cache.addAll(urlsToCache)
          console.log(&quot;Cache opened&quot;)
      } catch (err: any) {
          console.log(&quot;Error while installing SW: &quot;, err.message)
      }
  })
  
  self.addEventListener('fetch', (e: FetchEvent) =&gt; {
      e.respondWith((async () =&gt; {
          // Handling fetch
          console.log(`Handling req for '${e.request.url}'`)
          const cachedRes = await caches.match(e.request, { cacheName: CACHE_NAME })
          if (cachedRes) {
              console.log(`Serving cached response for '${e.request.url}'`)
          }
          return cachedRes || await fetch(e.request)
      })())
  })
  
  export default null
  </code></pre>
  <p><strong>src/web-worker/tsconfig.json</strong></p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;ESNext&quot;,
      &quot;useDefineForClassFields&quot;: true,
      &quot;lib&quot;: [&quot;ESNext&quot;, &quot;WebWorker&quot;],
      &quot;allowJs&quot;: false,
      &quot;skipLibCheck&quot;: false,
      &quot;esModuleInterop&quot;: false,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;strict&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;module&quot;: &quot;ESNext&quot;,
      &quot;moduleResolution&quot;: &quot;Node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;noEmit&quot;: true,
    },
    &quot;include&quot;: [&quot;*.ts&quot;]
  }
  </code></pre>