vite-pwa works fine in development mode. But throwing this error

[bytesagar]

![image](https://user-images.githubusercontent.com/43983588/203244231-629f445f-227e-43f7-949f-3b52ad89949b.png)

GET https://employee.raralabs.live/ 404 (Not Found)
employee.raralabs.live/:1 Uncaught TypeError: Failed to resolve module specifier "react-dropzone". Relative references must start with either "/", "./", or "../".
The script has an unsupported MIME type ('text/html').
employee.raralabs.live/:1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://employee.raralabs.live/') with script ('https://employee.raralabs.live/sw.ts'): The script has an unsupported MIME type ('text/html').

My vite config file is as below,

import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  envDir: '.',
  // build: {
  //   rollupOptions: {
  //     external: 'react-dropzone',
  //   },
  // },
  plugins: [
    react(),
    tsconfigPaths(),
    VitePWA({
      srcDir: 'src',
      filename: 'sw.ts',
      scope: '/',
      base: '/',

      devOptions: {
        enabled: true,
        type: 'module',
      },

      manifest: {
        scope: '/',
        name: 'Rara Internal Tool',
        short_name: 'Rara',
        icons: [
          { src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: '/android-chrome-512x512.png', sizes: '512x512', type: 'image/png' },
        ],
        theme_color: '#000000',
        background_color: '#000000',
        display: 'standalone',
      },
    }),
  ],
  /* If proxy is needed

  server: {
    proxy: {
      "/api": "localhost:8080"
    }
  },
  */
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      tslib: 'tslib/tslib.es6.js',
    },
  },
});

[userquin]

@bytesagar if you want to use your custom sw you need to add strategies: 'injectManifest' to pwa options, otherwise it will not be compiled by the plugin and you cannot use typescript (sw.ts) in the browser.

EDIT: if you check your build folder, there will be sw.ts (maybe missing since it is not being used/imported) and also sw.js, but the plugin (client) will register sw.ts since you've filename set to sw.ts:

Here the sw.js: the default strategy is generateSW:

[bytesagar]

@userquin so if i don't use my own strategy. I can just set the strategy to generateSW and it should work fine??

[userquin]

@bytesagar yes, but must remove filename and srcDir options (check src/types.ts module).

Beware, default registerType option is prompt for update and so you need to use a virtual pwa module, if you dont want this behavior use registerType with auto. Check the docs.

[bytesagar]

@userquin
Everything is working fine but sometime when I open the site I get this When I again hard reload the page, the error goes away. and my config for pwa is

    VitePWA({
      strategies: 'generateSW',
      registerType: 'autoUpdate',
      manifest: {
        name: 'Rara Internal Tool',
        short_name: 'Rara',
        icons: [
          { src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: '/android-chrome-512x512.png', sizes: '512x512', type: 'image/png' },
        ],
        theme_color: '#000000',
        background_color: '#000000',
        display: 'standalone',
      },
    }),

[userquin]

@bytesagar check your cache headers: https://vite-pwa-org.netlify.app/deployment/#cache-control

[bytesagar]

@userquin It didnt help, how do i disable cache in sw.ts, I noticed one thing my registerSw file didn't have the header no-cache. I think that was causing the problem. Does workbox: {cleanupOutdatedCache: true} solve the problem. Or is there any other workaround