How to fix build error after setting up PWA for existing Vue 3 project?

[ruud00000]

I setup a Vue 3 project with command npm create vue@latest. Then to add PWA I installed vite-plugin-pwa, updated vite.config.js and made some changes to other files, see below.

Now I cannot build the project anymore, with error: failed to load config from C:\Users\Ruud Naastepad\source\repos\wkb-app\vite.config.js error during build: file:///C:/Users/Ruud%20Naastepad/source/repos/wkb-app/vite.config.js.timestamp-1705869150624-e019feee6a7b4.mjs:3 import VitePWA from "file:///C:/Users/Ruud%20Naastepad/source/repos/wkb-app/node_modules/vite-plugin-pwa/dist/index.js"; ^^^^^^^ SyntaxError: The requested module 'file:///C:/Users/Ruud%20Naastepad/source/repos/wkb-app/node_modules/vite-plugin-pwa/dist/index.js' does not provide an export named 'default'

If I remove line

  "type": "module",

from package.json I get different build error: failed to load config from C:\Users\Ruud Naastepad\source\repos\wkb-app\vite.config.js error during build: TypeError: (0 , import_vite_plugin_pwa.default) is not a function

How can I fix that?

vite.config.js:

import { fileURLToPath, URL } from 'node:url'
import VitePWA from 'vite-plugin-pwa';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'auto',
      includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
      manifest: {
        name: 'WKB PWA',
        short_name: 'WKB P',
        theme_color: '#01bd7e',
        start_url: '/',
        display: 'standalone',
        background_color: "#fff",
        icons: [
          {
            "src": "/img/icons/maskable_icon.png",
            "sizes": "1024x1024",
            "type": "image/png",
            "purpose": "maskable"
          },
          {
            "src": "/img/icons/maskable_icon_x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
          },
          {
            "src": "/img/icons/maskable_icon_x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable"
          },
          {
            "src": "/img/icons/windows11/SmallTile.scale-100.png",
            "sizes": "71x71"
          },
         
          {
            "src": "/img/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-80.png",
            "sizes": "80x80"
          },
          {
            "src": "/img/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png",
            "sizes": "96x96"
          },
          {
            "src": "/img/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png",
            "sizes": "256x256"
          },
          {
            "src": "/img/icons/android/android-launchericon-512-512.png",
            "sizes": "512x512"
          },
          {
            "src": "/img/icons/android/android-launchericon-192-192.png",
            "sizes": "192x192"
          },
          {
            "src": "/img/icons/android/android-launchericon-144-144.png",
            "sizes": "144x144"
          },
etc 
        ],
      },
    }),          


  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    manifest: true,
  }
})

main.js look like this:

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './registerServiceWorker'

// main.js

const app = createApp(App)

app.use(router)

app.mount('#app')

No registerServiceWorker.js file since as I understand it Vite should take care of that.

Package.json:

{
  "name": "wkb-app",
  "version": "1.0.6",
  "type": "module",
  "private": true,
  "author": "",
  "scripts": {
    "build": "vite build",
    "test:unit": "vitest",
    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
    "dev": "vite",
    "preview": "vite preview",
    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'"
  },
  "dependencies": {
    "express": "^4.18.2",
    "register-service-worker": "^1.7.2",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.6.2",
    "@vue/test-utils": "^2.4.3",
    "cypress": "^13.6.3",
    "jsdom": "^23.0.1",
    "start-server-and-test": "^2.0.3",
    "vite": "^5.0.10",
    "vite-plugin-pwa": "^0.17.4",
    "vitest": "^1.0.4"
  }
}

service-worker.js , for now:

console.log("Message from SW")

[so1ve]

import { VitePWA } from 'vite-plugin-pwa'