@vite-pwa/vitepress Plugin OutDir Handling Issue with srcDir Configuration

[chenyaowen123]

中文版本： 在使用 @vite-pwa/vitepress 插件时，我发现了两个问题 1、其中一个是安装运行的问题。 2、文件输出的问题。 我的推测：在处理 PWA 构建输出目录 outDir 的时候，没有正确地处理 VitePress 配置中的 srcDir 设置。当指定 srcDir 为 src 文件夹时，插件默认生成的 .vitepress/dist 目录错误地出现在 src 文件夹内。这表明插件在解析输出目录时，没有根据 srcDir 的值进行相应的调整。

I found two issues when using the @ vite pwa/vitepress plugin

1. One of them is the issue of installation and operation.
2. The issue with file output. My speculation is that the srcDir setting in the VitePress configuration was not properly handled when processing the PWA build output directory outDir. When specifying srcDir as the src folder, the plugin's default generated. vitepress/dist directory incorrectly appears in the src folder. This indicates that the plugin did not make corresponding adjustments based on the value of srcDir when parsing the output directory.

My configuration process

install

yarn add @vite-pwa/vitepress

pwaConfig.js

const pwaConfig = {
  enabled: true,
  outDir: ".vitepress/dist", // 输出目录
  registerType: "autoUpdate", // 注册类型为自动更新
  includeManifestIcons: false, // 不包含清单图标
  manifest: {
    id: "/", // 清单 ID
    name: "蜗牛学易", // 应用名称
    short_name: "蜗牛学易", // 应用的短名称
    description: "蜗牛学易", // 应用的描述
    theme_color: "#ffffff", // 主题颜色
    icons: [
      {
        src: "/images/pwa-120x120.png", // 图标路径
        sizes: "120x120", // 图标尺寸
        type: "image/png", // 图标类型
      },
      {
        src: "/images/pwa-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/images/pwa-512x512.png",
        sizes: "512x512",
        type: "image/png",
        purpose: "any maskable",
      },
    ],
  },
  workbox: {
    globPatterns: ["**/*.{css,js,html,svg,png,ico,txt,woff2}"],
  },
};
export default pwaConfig;

.vitePress/config.mjs

import { defineConfig } from "vitepress";
import { withPwa } from "@vite-pwa/vitepress";
import pwaConfig from "./pwaConfig/index";

export default withPwa(defineConfig({
  ....
  srcDir:'src',
  pwd:pwaConfig,
}));

Error reported during code runtime

MacBook vitepress % yarn docs:dev                      
yarn run v1.22.17
warning package.json: No license field
$ vitepress dev
failed to load config from /Users/chenyaowen/vitepress/vitepress/.vitepress/config.mjs
failed to start server. error:
Cannot find package 'vite-plugin-pwa' imported from /Users/chenyaowen/vitepress/vitepress/node_modules/@vite-pwa/vitepress/dist/index.mjs
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite-plugin-pwa' imported from /Users/chenyaowen/vitepress/vitepress/node_modules/@vite-pwa/vitepress/dist/index.mjs
    at new NodeError (node:internal/errors:399:5)
    at packageResolve (node:internal/modules/esm/resolve:889:9)
    at moduleResolve (node:internal/modules/esm/resolve:938:20)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The device I am using is MacBook,，Node v18.16.0，yarn v1.22.17。When I tried to reinstall vite plugin pwa in my project, this issue was resolved, but I am very confused about it.

Now the content of my package.json article is as follows

{
  "devDependencies": {
    "vitepress": "^1.0.2"
  },
  "scripts": {
    "docs:dev": "vitepress dev",
    "docs:build": "vitepress build",
    "docs:preview": "vitepress preview"
  },
  "dependencies": {
    "@vercel/speed-insights": "^1.0.11",
    "@vite-pwa/vitepress": "^0.5.0",
    "chart.js": "^4.4.2",
    "sass": "^1.75.0",
    "vite-plugin-pwa": "^0.20.0"
  }
}

I tried to execute the build command

yarn docs:build

The. vitepress/dist directory appears in my src directory，I tried deleting node.modules and reinstalling them, but it didn't work.

my-vitepress-project/
├── src/ <-  VitePress  `srcDir`
│   ├── .vitepress/
│   │   └── dist/ <- Why does this appear here ？
│   ├── index.md
│   └── ...
│
├── .vitepress/
│   └── dist/ 
│   └── config.mjs
│
├── package.json

Some necessary screenshots

[chenyaowen123]

I am a novice programmer and my English is not very good. There might be a lot of non-standard code. If my description is not detailed enough, or if there is anything you need me to provide, please feel free to tell me at any time.😅

[userquin]

try configuring outDir with absolute path:

// .vitepress/pwa/index.js
import { dirname, resolve } from "node:fs";
import { fileURLToPath } from "node:url";

const _dirname = dirname(fileURLToPath(import.meta.url));

const pwaOptions = {
   outDir: resolve(_dirname, "../dist"),
   ...
}

[chenyaowen123]

Thank you for your guidance, I have succeeded. But there is a slight difference. I used the code you provided, but it prompted The requested module 'node: fs' does not provide an export named' dirname ', so I changed it to the following method, achieving my expected effect. 😋

// .vitepress/pwa/index.js
import path from 'path';
import { fileURLToPath } from 'url';

const _dirname = path.dirname(fileURLToPath(import.meta.url));

const pwaOptions = {
   outDir: path.resolve(_dirname, "../dist"),
   ...
}