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

[Hydrair]

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;
    },
};

[GuyGooL5]

this main.js snippet is the full thing? If so I guess you're missing the import of VitePWA

try importing it using import { VitePWA } from 'vite-plugin-pwa'; or const { VitePWA } = require('vite-plugin-pwa'); depending on your module resolution.

[Hydrair]

Oh, my bad, i did import it and updated the post.

The command line throws no more error but the console in the browser does:

Uncaught SyntaxError: The requested module '/node_modules/fast-deep-equal/index.js?v=9da7d76d' does not provide an export named 'default' (at args.js?v=9da7d76d:54:8)

[IanVS]

That's strange, fast-deep-equal is included in our optimizeDeps.include. Are you able to create a reproduction repo that we can look into?

[Hydrair]

Yes, here it is: https://github.com/Hydrair/MWE-import-virtual Using yarn and yarn storybook it produces the same behavior like the original project. After optimizing dependencies.

[IanVS]

Hi @Hydrair, I pulled down your repo and tried to run it (yarn then yarn storybook), but I'm getting:

info @storybook/react v6.4.20
info
info => Loading presets
[HPM] Proxy created: /  -> https://creaton-handwerker.samoa-app.de:8881

info => Ignoring cached manager due to change in manager config
ℹ ｢wdm｣: wait until bundle finished:
✘ [ERROR] No matching export in "browser-external:path" for import "extname"

    node_modules/@rollup/pluginutils/dist/es/index.js:1:9:
      1 │ import { extname, sep, resolve, posix } from 'path';

I'm using node v16.14.2, fwiw.

[Hydrair]

✘ [ERROR] No matching export in "browser-external:path" for import "extname"

    node_modules/@rollup/pluginutils/dist/es/index.js:1:9:
      1 │ import { extname, sep, resolve, posix } from 'path';

Okay this was fixed by adding path and fs to config.optimizeDeps.exclude, inspired by https://github.com/sveltejs/kit/issues/1570#issuecomment-856808078.

But now i'm at the original error again and virtual:pwa-register/react can not be solved.

[Hydrair]

Alright fixed it with https://github.com/windicss/windicss/issues/267#issuecomment-947881136.

The main.js now looks like this:

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

module.exports = {
    core: {
        builder: "@storybook/builder-vite",
    },
    stories: ["../src/**/**/*.stories.tsx"],
    addons: ["@storybook/addon-essentials"],
    framework: "@storybook/react",
    async viteFinal(config, { configType }) {
        config.optimizeDeps.include = [
            "react-router-dom",
            "vite",
            "vite-plugin-pwa",
            ...config.optimizeDeps.include,
        ];
        config.optimizeDeps.exclude = ["path", "fs"];
        config.plugins = config.plugins ?? [];
        config.plugins.push(
            VitePWA({
                root: dirname(__dirname),
            })
        );
        return config;
    },
};

Apparently by specifying the root Vite knows how to look for the exports.

Thanks for your help!