vite-plugin-pwa をpnpmで利用しようとした時のエラーを解決する

vite-plugin-pwa pnpmで利用した時に、virtual:pwa-registerがerrorになる

0. pnpmでvite react typescriptを作成する

% mkdir vite-react-pwa-sample
% cd vite-react-pwa-sample
% pnpm init
% touch pnpm-workspace.yaml
% pnpm create vite
✔ Project name: … vite-react-pwa
✔ Select a framework: › React
✔ Select a variant: › TypeScript

pnpm-workspace.yaml

packages:
  - "vite-react-pwa"

package.json

"scripts": {
  "dev": "pnpm  --parallel --filter \"./**\" dev"
}

% pnpm install
% pnpm dev

1.

vite-plugin-pwaをinstallして、設定する

% pnpm add -D vite-plugin-pwa

vite-config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// 下を追加
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      workbox: {
        sourcemap: true
      }
    })
  ],
})

[vite] Cannot find package 'vite-plugin-pwa' imported from PACKAGES

vite-plugin-pwaの型定義ファイルがないため、Errorとなっているのでtsconfig.jsonを設定していきます。ref

tsconfig.json

"compilerOptions": {
  "types": ["vite-plugin-pwa/client"],
}

2. virtual:pwa-registerを利用する際にErrorがでる

registerSWを利用しようとした時 `import { registerSW } from 'virtual:pwa-register'を利用しようとした場合に、

[plugin:vite:import-analysis] Failed to resolve import "virtual:pwa-register" from "src/main.tsx". Does the file exist?

とでるので、.npmrcを追加して依存関係のpackageを整理する。

% touch .npmrc

.npmrc

auto-install-peers=true

% pnpm install

追加でinstallするとErrorが消えました。

issue