[Bug] Importing "virtual:pwa-register" could not be resolved

Describe the bug

I’m building a PWA with Storybook and builder-vite. For convenience i wanted to add Vite-Plugin-PWA. To inform the user about an update a ReloadPrompt was added, which is also mentioned in the docs. The ReloadPrompt Component uses an import import { useRegisterSW } from "virtual:pwa-register/react"; but the builder does not seem to find the dependency.

Steps to reproduce the behavior

1. Add Vite-Plugin-PWA to package.json
2. Create the ReloadPrompt.tsx from here
3. yarn start-storybook

Expected behavior

Builder-vite should successfully import the virtual module

Screenshots and/or logs

The following dependencies are imported but could not be resolved:
virtual:pwa-register/react (imported by C:/Projekte/PWA/src/components/ReloadPrompt/ReloadPrompt.tsx)

Environment

• OS: [e.g. iOS] Windows
• Node.js version: [e.g. v12.17.0] v14.18.0
• Yarn version: [e.g. 6.14.4] 1.22.17
• Browser (if applicable): [e.g. chrome, safari] Brave
• Browser version (if applicable): [e.g. 22] 1.37.109

Additional context

When adding VitePluginPWA to the Vite config in Storybooks main.js the error is not shown, but Storybook wont build the iframe properly.

main.js:

const { VitePWA } = require("vite-plugin-pwa");

module.exports = {
    core: {
        builder: "@storybook/builder-vite",
    },
    stories: ["../src/**/**/*.stories.tsx"],
    addons: ["@storybook/addon-essentials"],
    // staticDirs: ['../public'],
    framework: "@storybook/react",

    async viteFinal(config, { configType }) {
        config.optimizeDeps.include = [
            "react-router-dom",
            "http-proxy-middleware",
            "vite",
            "vite-plugin-pwa",
            "fast-deep-equal",
            ...config.optimizeDeps.include,
        ];
        config.plugins.push(VitePWA({}));
        return config;
    },
};