Medium-Zoom refresh not working in build mode

digital-codes commented 1 year ago

Description

Vue carousel-like component with button to select one of different images via v-if. Zoomable state is set via useMediumZoom and zoom.refresh. I think I followed the instructions in the current docs. Works in dev mode but fails during build:


 Initializing and preparing data - done in 66ms
✔ Compiling with vite - done in 2.56s
⠋ Rendering 2 pages[Vue warn]: injection "Symbol(mediumZoom)" not found.
[Vue warn]: Unhandled error during execution of setup function 
  at <CarouSel2>
✖ Rendering 2 pages - failed in 44ms
Error: useMediumZoom() is called without provider.
    at useMediumZoom (file:///home/kugel/temp/js/vp2test/docs/.vuepress/.temp/.server/app.3b1c9574.mjs:325:11)
    at setup (file:///home/kugel/temp/js/vp2test/docs/.vuepress/.temp/.server/app.3b1c9574.mjs:2463:18)

The plugin config file contains the provide instruction:

    app.provide(mediumZoomSymbol, zoom);

Maybe this config file is called in dev mode but not in build mode?

Reproduction

https://github.com/digital-codes/vp2test/tree/main

Used Package Manager

npm

System Info

[kugel@tux2 vp2test]$ ./node_modules/.bin/vuepress info

  System:
    OS: Linux 6.2 Fedora Linux 36 (MATE-Compiz)
    CPU: (12) x64 Intel(R) Core(TM) i7-10710U CPU @ 1.10GHz
    Memory: 21.47 GB / 31.05 GB
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 18.16.0 - /opt/npm18/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.5.1 - /opt/npm18/bin/npm
  Utilities:
    Git: 2.40.1 - /usr/bin/git
  Browsers:
    Chrome: Not Found
    Firefox: 112.0.1
  npmPackages:
    @vuepress/bundler-vite:  2.0.0-beta.62 
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-beta.62 
    @vuepress/client:  2.0.0-beta.62 
    @vuepress/core:  2.0.0-beta.62 
    @vuepress/markdown:  2.0.0-beta.62 
    @vuepress/plugin-active-header-links:  2.0.0-beta.62 
    @vuepress/plugin-back-to-top:  2.0.0-beta.62 
    @vuepress/plugin-container:  2.0.0-beta.62 
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon:  2.0.0-beta.62 
    @vuepress/plugin-git:  2.0.0-beta.62 
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom:  2.0.0-beta.62 
    @vuepress/plugin-nprogress:  2.0.0-beta.62 
    @vuepress/plugin-palette:  2.0.0-beta.62 
    @vuepress/plugin-prismjs:  2.0.0-beta.62 
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data:  2.0.0-beta.62 
    @vuepress/plugin-toc: Not Found
    @vuepress/shared:  2.0.0-beta.62 
    @vuepress/theme-default:  2.0.0-beta.62 
    @vuepress/utils:  2.0.0-beta.62 
    vue:  3.3.4 
    vue-loader: Not Found
    vue-router:  4.2.1 
    vuepress: ^2.0.0-beta.62 => 2.0.0-beta.62 
    vuepress-vite:  2.0.0-beta.62 
    vuepress-webpack: Not Found

digital-codes commented 1 year ago

You should use the plugin when using its composables.

How? I followed the instructions from the plugin config page. It works in dev mode. The plugin is part of the default theme. I have just no idea in which file I should make changes? You have an example?

Mister-Hope commented 1 year ago

https://github.com/vuepress/vuepress-next/blob/9f21432e578c61fedfd4acc3466a08a58a0976a0/ecosystem/plugin-medium-zoom/src/client/config.ts#L19

Here, the plugin do not register any instance during ssr, so some workaround is:

Wrap your component with client-only
const zoom = __VUEPRESS_SSR__? null : useMediumZoom()

vuepress / core