解决在使用pnpm时尝试使用vite-plugin-pwa时遇到的错误

2 年 ago
韵, 科
1 minute

当使用pnpm插件vite-plugin-pwa时，virtual:pwa-register会报错。

使用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

packages:
  - "vite-react-pwa"

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

% pnpm install
% pnpm dev
Vite-React-TS (2).png

请确保门窗紧闭。
2. 请保证门窗关闭好。
3. 请务必把门窗关好。

安装并设置vite-plugin-pwa。

% pnpm add -D vite-plugin-pwa

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的类型定义文件，所以会报错。因此，我们需要对tsconfig.json进行配置。

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

2. 当使用virtual:pwa-register时出现错误。

当尝试使用 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

auto-install-peers=true

% pnpm install

安装附加组件后，错误消失了。

问题 tí)

bannerAds