Rollup failed to resolve import "virtual:pwa-register/vue"

I've been reading the documentation over and over, and there's still something I don't get. I simply followed the Vue3 Framework section of the plugin doc. When building for prod, this is what I get:

npm run spa:build:prod

> Arcsecond@3.3.2 spa:build:prod
> vite build --emptyOutDir --mode production

vite v3.2.1 building for production...
✓ 952 modules transformed.
[vite]: Rollup failed to resolve import "virtual:pwa-register/vue" from "src/components/widgets/ReloadPrompt.vue?vue&type=script&setup=true&lang.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
...

For building for dev:

The following dependencies are imported but could not be resolved:

  virtual:pwa-register/vue (imported by /Users/onekiloparsec/code/arcsecond-front/src/components/widgets/ReloadPrompt.vue?id=0)

my tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "noEmit": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "node",
      "vite/client",
      "vite-plugin-pwa/client",
      "vitest/globals",
      "vitest/importMeta"
    ],
    "typeRoots": [
      "node_modules/@types",
      "src/types",
      "types"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ],
  "exclude": [
    "dist",
    "node_modules"
  ]
}

my vite.config.ts:

import { loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
import loadVersion from 'vite-plugin-package-version'
import path from 'path'

// @ts-ignore
export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    plugins: [
      vue(),
      VitePWA({
        registerType: 'prompt',
        base: '/',
        workbox: {
          globPatterns: ['**/*.{js,css,html,ico,png,svg}']
        },
        manifest: {
          name: 'Arcsecond.io',
          short_name: 'Arcsecond.io',
(...)
        }
      }),
    ],
    resolve: {
(...)
    },
    appType: 'spa',
(...)
  }
}

Any idea what am I doing wrong? Thanks a lot in advance.

you're using "vite-plugin-pwa/client", in tsconfig file types, change it to "vite-plugin-pwa/vue",

what version of the plugin are you using?

I'm trying to use https://github.com/arco-design/arco-design-pro-vue/tree/main/arco-design-pro-vite For this library to support PWA problems, reproduce the process

Pull content from the arco-design-pro-vite
Perform pnpm install
pnpm install vite-plugin-pwa
After adding the relevant configuration of PWA to config/vite.config.base.ts, it can be found that the relevant content has been registered at this time, and no additional registration useRegisterSW is required in main.ts ({ immediate: true }); Wait, you can complete the registration in the browser without these contents, which seems a bit strange, that is, I will report an error after adding the useRegisterSW, vite.config.base.ts is as follows
```
import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader';
import { VitePWA } from 'vite-plugin-pwa';
import configArcoStyleImportPlugin from './plugin/arcoStyleImport';
```

export default defineConfig({ plugins: [ vue(), vueJsx(), svgLoader({ svgoConfig: {} }), configArcoStyleImportPlugin(), VitePWA({ manifest: { name: 'share', description: 'share info', icons: [ { src: 'images/192x192.png', sizes: '192x192', type: 'image/png', }, ], }, registerType: 'autoUpdate', workbox: { // globPatterns: [], globIgnores: ['registerSW.js', 'sw.js', 'workbox-*.js'],

    runtimeCaching: [
      {
        urlPattern: /.*\.(?:png|jpg|jpeg|svg|gif)/,
        handler: 'CacheFirst',
        options: {
          cacheName: 'image-cache',
          expiration: {
            maxEntries: 20,
            maxAgeSeconds: 12 * 60 * 60,
          },
        },
      },
    ],
  },
  devOptions: {
    enabled: true,
  },
}),

], resolve: { alias: [ { find: '@', replacement: resolve(dirname, '../src'), }, { find: 'assets', replacement: resolve(dirname, '../src/assets'), }, { find: 'vue-i18n', replacement: 'vue-i18n/dist/vue-i18n.cjs.js', // Resolve the i18n warning issue }, { find: 'vue', replacement: 'vue/dist/vue.esm-bundler.js', // compile template }, ], extensions: ['.ts', '.js'], }, define: { 'process.env': {}, }, css: { preprocessorOptions: { less: { modifyVars: { hack: true; @import (reference) "${resolve( 'src/assets/style/breakpoint.less' )}";, }, javascriptEnabled: true, }, }, }, });


 On the contrary, if the following content is written in main.ts, an error will be reported and the corresponding path cannot be found. Unable to resolve path to module'virtual: pwa-register/vue'. Not only eslint, but also pnpm run build will report the corresponding error at this time.
 ```ts
import { createApp } from 'vue';
import ArcoVue from '@arco-design/web-vue';
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
import globalComponents from '@/components';
import { useRegisterSW } from 'virtual:pwa-register/vue';
import router from './router';
import store from './store';
import i18n from './locale';
import directive from './directive';
import App from './App.vue';
// Styles are imported via arco-plugin. See config/plugin/arcoStyleImport.ts in the directory for details
// 样式通过 arco-plugin 插件导入。详见目录文件 config/plugin/arcoStyleImport.ts
// https://arco.design/docs/designlab/use-theme-package
import '@/assets/style/global.less';
import '@/api/interceptor';

const app = createApp(App);
app.use(ArcoVue, {});
app.use(ArcoVueIcon);
useRegisterSW({ immediate: true });
app.use(router);
app.use(store);
app.use(i18n);
app.use(globalComponents);
app.use(directive);

app.mount('#app');

I have noticed the relevant documentation, so the tsconfig.json was modified to the following

 {
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "allowJs": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite-svg-loader", "vite-plugin-pwa/vue"],
    "lib": ["es2020", "dom"],
    "skipLibCheck": true
  },
  "include": ["src/**/*", "src/**/*.vue", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

After finding that it could not be solved, and I also made the following attempts to upgrade vite and other related versions, package.json as follows

{
  "name": "ArcoDesignTeam",
  "description": "ArcoDesign Team",
  "version": "1.0.0",
  "private": true,
  "author": "ArcoDesign Team",
  "license": "MIT",
  "scripts": {
    "dev": "vite --config ./config/vite.config.dev.ts",
    "build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts",
    "report": "cross-env REPORT=true npm run build",
    "preview": "npm run build && vite preview --host",
    "type:check": "vue-tsc --noEmit --skipLibCheck",
    "lint-staged": "npx lint-staged",
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.vue": [
      "stylelint --fix",
      "prettier --write",
      "eslint --fix"
    ],
    "*.{less,css}": [
      "stylelint --fix",
      "prettier --write"
    ]
  },
  "dependencies": {
    "@arco-design/web-vue": "^2.53.3",
    "@arco-themes/vue-gi-demo": "^0.0.47",
    "@vueuse/core": "^9.13.0",
    "arco-design-pro-vue": "^2.7.2",
    "axios": "^0.27.2",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.10",
    "echarts": "^5.4.3",
    "lodash": "^4.17.21",
    "md5": "^2.3.0",
    "mitt": "^3.0.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.1.7",
    "qrcode": "^1.5.3",
    "qrcode.vue": "^3.4.1",
    "query-string": "^8.1.0",
    "vite-plugin-pwa": "^0.17.2",
    "vue": "^3.3.9",
    "vue-echarts": "^6.6.1",
    "vue-i18n": "^9.8.0",
    "vue-router": "^4.2.5",
    "vue-types": "^5.1.1",
    "workbox-window": "^7.0.0"
  },
  "devDependencies": {
    "@arco-plugins/vite-vue": "^1.4.5",
    "@commitlint/cli": "^17.8.1",
    "@commitlint/config-conventional": "^17.8.1",
    "@types/crypto-js": "^4.2.1",
    "@types/lodash": "^4.14.202",
    "@types/md5": "^2.3.5",
    "@types/mockjs": "^1.0.10",
    "@types/nprogress": "^0.2.3",
    "@types/qrcode": "^1.5.5",
    "@types/sortablejs": "^1.15.7",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "@vitejs/plugin-vue": "^4.5.0",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "@vue/babel-plugin-jsx": "^1.1.5",
    "consola": "^2.15.3",
    "cross-env": "^7.0.3",
    "eslint": "^8.54.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.18.1",
    "husky": "^8.0.3",
    "less": "^4.2.0",
    "lint-staged": "^13.3.0",
    "mockjs": "^1.1.0",
    "postcss-html": "^1.5.0",
    "prettier": "^2.8.8",
    "rollup-plugin-visualizer": "^5.9.3",
    "stylelint": "^15.11.0",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard": "^34.0.0",
    "stylelint-order": "^6.0.3",
    "typescript": "~5.1.6",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.5.0",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-svg-loader": "^3.6.0",
    "vue-tsc": "^1.8.22"
  },
  "engines": {
    "node": ">=14.0.0"
  }
}

vite-pwa / vite-plugin-pwa

Rollup failed to resolve import "virtual:pwa-register/vue" #447